CODEWITHSUNDEEP
jqueryjquery-ui
LoneWolfPR
LoneWolfPR

Reputation: 4100

jquery ui: Nested accordion is all screwed up

I have some code that is generated using php. It outputs a nested accordion. For some reason the accordion looks very screwed up. So much so that I can't even explain. Here is the code that is generated:

<div class='accordion'>
    <h3>2012</h3>
    <div class='accordion'>
        <h3>October 2012</h3>
        <div>October 5, 2012</div>
        <div>October 5, 2012</div>
        <div>October 4, 2012</div>
        <div>October 4, 2012</div>
        <div>October 4, 2012</div>
        <div>October 3, 2012</div>
        <div>October 3, 2012</div>
        <div>October 3, 2012</div>
        <div>October 1, 2012</div>
        <div>October 1, 2012</div>
        <div>October 1, 2012</div>
        <div>October 1, 2012</div>
    </div>
    <div class='accordion'>
        <h3>September 2012</h3>
        <div>September 30, 2012</div>
        <div>September 29, 2012</div>
        <div>September 29, 2012</div>
        <div>September 26, 2012</div>
        <div>September 26, 2012</div>
        <div>September 25, 2012</div>
        <div>September 24, 2012</div>
        <div>September 19, 2012</div>
        <div>September 19, 2012</div>
        <div>September 19, 2012</div>
        <div>September 19, 2012</div>
        <div>September 19, 2012</div>
        <div>September 11, 2012</div>
        <div>September 5, 2012</div>
    </div>
    <div class='accordion'>
        <h3>August 2012</h3>
        <div>August 19, 2012</div>
        <div>August 17, 2012</div>
        <div>August 9, 2012</div>
        <div>August 4, 2012</div>
        <div>August 4, 2012</div>
        <div>August 4, 2012</div>
        <div>August 4, 2012</div>
        <div>August 4, 2012</div>
        <div>August 4, 2012</div>
        <div>August 2, 2012</div>
    </div>
    <div class='accordion'>
        <h3>July 2012</h3>
        <div>July 1, 2012</div>
        <div>July 1, 2012</div>
    </div>
</div>

I call it using:

$(document).ready(function(){
    $('div.accordion').accordion({
            autoHeight:false,
            collapsible:true,
            active:false});
});

This looks like it should work. To see what it's doing go to: http://lonewolfdigital.com/misc/test/

Upvotes: 0

Views: 621

Answers (2)

Plynx
Plynx

Reputation: 11461

See the following fiddle for your code wrapped in the proper divs: http://jsfiddle.net/ufEyn/2/

$(document).ready(function() {
$('.subaccordion,.accordion1').accordion({
    autoHeight: false,
    collapsible: true,
    active: false
});

Upvotes: 0

wirey00
wirey00

Reputation: 33661

An accordion has a heading.. then it's contents.. so what you want is this structure

<div class='accordion'> <!-- tells its an accordion -->
     <h3>2012</h3> <!-- this is the first heading  -->

    <div class='accordion'> <!-- tells its another accordion  -->
         <h3>October 2012</h3> <!-- first heading  -->

        <div> <!-- the headings content - only one content per heading and so on  -->
            <div>October 5, 2012</div>
            <div>October 5, 2012</div>
            <div>October 4, 2012</div>
            <div>October 4, 2012</div>
            <div>October 4, 2012</div>
            <div>October 3, 2012</div>
            <div>October 3, 2012</div>
            <div>October 3, 2012</div>
            <div>October 1, 2012</div>
            <div>October 1, 2012</div>
            <div>October 1, 2012</div>
            <div>October 1, 2012</div>
        </div>
         <h3>September 2012</h3>

        <div>
            <div>September 30, 2012</div>
            <div>September 29, 2012</div>
            <div>September 29, 2012</div>
            <div>September 26, 2012</div>
            <div>September 26, 2012</div>
            <div>September 25, 2012</div>
            <div>September 24, 2012</div>
            <div>September 19, 2012</div>
            <div>September 19, 2012</div>
            <div>September 19, 2012</div>
            <div>September 19, 2012</div>
            <div>September 19, 2012</div>
            <div>September 11, 2012</div>
            <div>September 5, 2012</div>
        </div>
         <h3>August 2012</h3>

        <div>
            <div>August 19, 2012</div>
            <div>August 17, 2012</div>
            <div>August 9, 2012</div>
            <div>August 4, 2012</div>
            <div>August 4, 2012</div>
            <div>August 4, 2012</div>
            <div>August 4, 2012</div>
            <div>August 4, 2012</div>
            <div>August 4, 2012</div>
            <div>August 2, 2012</div>
        </div>
         <h3>July 2012</h3>

        <div>
            <div>July 1, 2012</div>
            <div>July 1, 2012</div>
        </div>
    </div>​
</div>

http://jsfiddle.net/c8qW3/

Upvotes: 2

Related Questions