CodeIgniter Forums
Jquery accordion question - Printable Version

+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: Archived Discussions (https://forum.codeigniter.com/forumdisplay.php?fid=20)
+--- Forum: Archived Development & Programming (https://forum.codeigniter.com/forumdisplay.php?fid=23)
+--- Thread: Jquery accordion question (/showthread.php?tid=20561)

Jquery accordion question - El Forum - 07-14-2009

[eluser]webscriptz.be[/eluser]
i'm using the jquery accordion plugin:

http://jqueryui.com/demos/accordion/#event-changestart

But I want a sub accordion and for one thing or another it doesn't seem to work:

Code:
[removed]
    $(function() {
        $("#accordion").accordion();
    });
    
    $(function() {
        $("#subaccordion").accordion();
    });

    [removed]

<div class="demo">

<div id="accordion">
    <h3><a href="#">Section 1</a></h3>
    <div>
        <p>test</p>
    </div>
    <h3><a href="#">Section 2</a></h3>
    <div>
        <p>test</p>
    </div>
    <h3><a href="#">Section 3</a></h3>
    <div>
        <p>test</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>        
        <div id="subaccordion">
    <h3><a href="#" style="clear:both">Section 41</a></h3>
    <div>
        <p>test</p>
    </div>
    <h3><a href="#">Section 42</a></h3>
    <div>
        <p>test</p>
    </div>
    <h3><a href="#">Section 43</a></h3>
    <div>
        <p>
        Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
        Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
        ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
        lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
        </p>
        <ul>
            <li>List item one</li>
            <li>List item two</li>
            <li>List item three</li>
        </ul>
    </div>
    <h3><a href="#">Section 44</a></h3>
    <div>
        <p>
        Cras dictum. Pellentesque habitant morbi tristique senectus et netus
        et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
        faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
        mauris vel est.
        </p>
        <p>
        Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
        Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
        inceptos himenaeos.
        </p>
    </div>
</div>
    </div>
</div>

</div>&lt;!-- End demo --&gt;

can anybody help me?

Jquery accordion question - El Forum - 07-14-2009

[eluser]TheFuzzy0ne[/eluser]
I'd suggest you check the demo again, as you're syntax doesn't seem to match any of the examples.

Jquery accordion question - El Forum - 07-14-2009

[eluser]webscriptz.be[/eluser]
you were right (sorry for the code, i'm working on a acer 'one' so tiny screen

but the exact code with some extras:

Code:
[removed]
    $(function() {
        $("#accordion").accordion({
            collapsible: true
        });
        
        $("#accordion").accordion({
            autoHeight: false
        });
        
        $("#accordion").accordion("activate", false);

    });


    $(function() {
        $("#subaccordion").accordion({
            collapsible: true
        });
        
        $("#subaccordion").accordion({
            autoHeight: false
        });
        
        $("#subaccordion").accordion("activate", false);

    });
[removed]


<div id="accordion">
                    <h3><a href="#">Section 1</a></h3>
                    <div id="subaccordion">
                        <h3><a href="#">Section 11</a></h3>
                        <div>First content</div>
                        <h3><a href="#">Section A2</a></h3>
                        <div>Second content</div>
                    </div>
                    <h3><a href="#">Section 2</a></h3>
                    <div>Second content</div>
            </div>


Jquery accordion question - El Forum - 07-14-2009

[eluser]jdfwarrior[/eluser]
Your problem is very descriptive (and yes im being extremely sarcastic). What is it not doing?

What are you trying to nest accordions? That seems to be a bit odd. You also need to specify that your H3 tags are the header and not the anchor tags (default)

@fuzzy: It does follow the examples somewhat. Jquery's accordion defaults to having the overall container, then anchor tags are the headings for the accordion, then whatever container is after the anchor is the content.

jQuery Accordion

Jquery accordion question - El Forum - 07-14-2009

[eluser]jdfwarrior[/eluser]
Looking at your second post, seems that you need to work on your jQuery some. That code is wrong. You dont call the accordion method 3 times to set your options..

Code:
$("#accordion").accordion({
    collapsible: true,
    autoHeight: false,
    active: false,
    header: 'h3'
});

Changing the header came straight out of the documentation.