jQuery Accordion from $("div id=\"accordion\">

Question

I am using GWTQuery and GWTQuery-UI, but I think it would work the same for JQuery-UI.

How can I create an accordion without define the accordion in the HTML doc?

e.g.

    $("<div id=\"accordion\">   <h3><a href=\"#\">Section 1</a></h3><div><p>Mauris.</p></div><h3><a href=\"#\">Section 2</a></h3><div><p>Sed non urna.</p></div><h3><a href=\"#\">Section 3</a></h3><div><p>Nam enim risus.</p><ul><li>List item one</li><li>List item two</li>li>List item three</li></ul></div><h3><a href=\"#\">Section 4</a></h3><div><p>Cras dictum.</p><p>Suspendisse</p></div></div>");
    $("#accordion").as(Ui).accordion();

This wont show any text at all. If i append it to a Panel, i only get the Text with the Section but no accordion.

Thanks

Edit: Creating an empty div accordion in the HTML file, append the string

$("#accordion")
            .append("<h3><a href=\"#\">Section 1</a></h3><div><p>Section 1 text here.</p></div>");
    $("#accordion")
            .append("<h3><a href=\"#\">Section 2</a></h3><div><p>Section 2 text here.</p></div>");
    $(absolutePanel_1.getElement()).append(
            $("#accordion").as(Ui).accordion());

and add it to a gwt-panel is working.

James Johnson · Accepted Answer · 2012-04-09T16:58:34.880

1

You can create the accordion in JavaScript, but you will need to append it to an element for it to be displayed on the page.

See this jsFiddle for a demonstration. Here's the code:

<script type="text/javascript">
    $(function(){

        //get the accordion container
        var $accordion = $("#accordion");    

        //append elements to the accordion   
        $accordion.append("<h3><a href=\"#\">Section 1</a></h3><div><p>Section 1 text here.</p></div>");
        $accordion.append("<h3><a href=\"#\">Section 2</a></h3><div><p>Section 2 text here.</p></div>");

        //turn it into an accordion
        $accordion.accordion();          

    });
</script>
<div id="accordion"></div>

edited Apr 09 '12 at 16:58

answered Apr 09 '12 at 15:38

James Johnson

45,496
8
73
110

Thanks for your help! I am getting near it. now it looks like [this](http://img59.imageshack.us/img59/2151/201204091748.jpg). Can this issue be solved using css (height) or does it lie elsewhere? Thanks again – Beig Apr 09 '12 at 15:51
It looks like a CSS issue. Try adding `clear:both` to the `h3` element. See my revised answer. – James Johnson Apr 09 '12 at 15:59
@Beig: Also, in the context of the accordion, make sure that the `h3` element's display property is set to `block` – James Johnson Apr 09 '12 at 16:12
Thanks again. I am usin the .css file from [jQueryUI](http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css). Now it looks like [this](http://img38.imageshack.us/img38/779/201204091822.jpg). I can't open the other "tabs" and can't even reopen the first after i click on the second. Normal accordion works fine (div in HTML file), maybe i can figure a way out so it won't show when the accordion is not yet created. – Beig Apr 09 '12 at 16:24
Can you create a jsFiddle? That way I can see what you're doing, and post an updated example once I've fixed it. – James Johnson Apr 09 '12 at 16:41
@Beig: I think I figured it out. I updated my answer and included a jsFiddle to demonstrate. Let me know if that works for you. – James Johnson Apr 09 '12 at 16:59
Thanks for all your effort. I edited my Post with what is working for me. Thanks again for your help! – Beig Apr 09 '12 at 19:15

score 0 · Answer 2 · answered Apr 09 '12 at 15:38

If you set your new jQuery object to a variable you will be able to call the accordion() method on it, like this:

var $div = $("<div id=\"accordion\"><h3><a href=\"#\">Section 1</a></h3><div><p>Mauris.</p></div><h3><a href=\"#\">Section 2</a></h3><div><p>Sed non urna.</p></div><h3><a href=\"#\">Section 3</a></h3><div><p>Nam enim risus.</p><ul><li>List item one</li><li>List item two</li>li>List item three</li></ul></div><h3><a href=\"#\">Section 4</a></h3><div><p>Cras dictum.</p><p>Suspendisse</p></div></div>");
$div.accordion();

However, there may be functions which accordion() uses which rely on the element being accessible via the DOM, so this may still not work as I have not tested it.

The point of this is lost on me however, as I don't see the point of spending time creating an accordion on an element which cannot be seen?

jQuery Accordion from $("div id=\"accordion\">

2 Answers2