Creating a jQuery Accordion from non standard HTML structure

Question

Hi,

We all know that you use this structure to make an accordion

<div id="accordion">
    <h3><a href="#">First header</a></h3>
    <div>First content</div>
    <h3><a href="#">Second header</a></h3>
    <div>Second content</div>
</div>

But what if you want to create an accordion, using the code already in place, set by a terrible CMS?

This is the layout

 <div id="sideNavContent" class="clearfix">
        <ul>
        <!-- Left Nav (selected) level: 2 - Not hidden - with children -->
           <li class="NML3Selected"><div><a id="NML3LinkSelected" href="/forcedelivered.aspx" title="Force Delivered">Force Delivered</a></div></li>
            <li class="NML4"><div><a id="NML4Link" href="/340.aspx" title="Test Page 1">Test Page 1</a></div></li>
            <li class="NML4"><div><a id="NML4Link" href="/341.aspx" title="Test Page 2">Test Page 2</a></div></li>
            <li class="NML4"><div><a id="NML4Link" href="/342.aspx" title="Test Page 3">Test Page 3</a></div></li>
           <li class="NML3"><div><a id="NML3Link" href="/ftmfaq.aspx" title="Force Training Frequently Asked Questions">FAQs</a></div></li>
            <li class="NML4"><div><a id="NML4Link" href="/340.aspx" title="Test Page 1">Test Page 4</a></div></li>
            <li class="NML4"><div><a id="NML4Link" href="/341.aspx" title="Test Page 2">Test Page 5</a></div></li>
            <li class="NML4"><div><a id="NML4Link" href="/342.aspx" title="Test Page 3">Test Page 6</a></div></li>
           <li class="NML3"><div><a id="NML3Link" href="/trainingsupport.aspx" title="Training Support">Training Support</a></div></li>
            <li class="NML4"><div><a id="NML4Link" href="/340.aspx" title="Test Page 1">Test Page 7</a></div></li>
            <li class="NML4"><div><a id="NML4Link" href="/341.aspx" title="Test Page 2">Test Page 8</a></div></li>
            <li class="NML4"><div><a id="NML4Link" href="/342.aspx" title="Test Page 3">Test Page 9</a></div></li>
        </ul>
        </div>

I can ALMOST get it to work, it outputs only the first child link in an acordion, im using

    <script type="text/javascript">
$(function() {
    $("#sideNavContent").accordion({
    collapsible: true, 
    active: false,
    header: "li.NML3",
    //header: "li:has(NML3)", //argh *sobs*
    navigation: true
    })

});
</script>

Been messing about with the jQuery WAS command, gave up on that (the first heading as a class of .NL3Selected so i wanted accordion to see that it contained NL3)

Any clever jQueryness welcome, to make this horrible markup, work as an accordion..

p

Answer 1

I probably would just write my own accordion widget.

Although, you could try applying a function on the accordion change event and iterate over the next <li> elements until you hit another header element. Then wrap those elements into a <div> and see if the accordion will work properly.

Answer 2

You could pre-process the html and change it to what you want it to be like this:

var sidenav = $('#sideNavContent');
sidenav.find('li').unwrap()
.filter('.NML3, .NML3Selected').each(function(){
    $(this).nextUntil('.NML3').find('div').unwrap().wrapAll('<div></div>');
}).find('div').unwrap().find('a').unwrap().wrap('<h2>');
sidenav.accordion();