Question

I’ve been using a shareware JS accordion-style sidebar (www.dynamicdrive.com/dynamicindex1/slashdot.htm). It’s been working beautifully with PHP-based HTML, but is not working with AJAX.

The sidebar builds itself on <div>,<span>and<a> elements. Here is a section of the JS code:

for (var i = 0; i < this.submenus.length; i++)
    this.submenus[i].getElementsByTagName("span")[0].onclick = function() {
        mainInstance.toggleMenu(this.parentNode);
    };

If I use hardcoded HTML like the following (or construct the same with PHP), it works fine:

<div id="navbar_side" class="sdmenu">
<div><span>STUDENTS</span><a>Adding Students</a><a>Deleting Students</a></div>
</div> 

However, if I start with:

<div id="navbar_side" class="sdmenu"></div>

and then use this:

document.getElementById("navbar_side").innerHTML="<div><span>STUDENTS</span><a>Adding Students</a><a>Deleting Students</a></div>"; 

the menu doesn’t slide. The info is all there. The <a hrefs> all work (which I’ve left out here). But the accordion movement doesn’t – well… – move!

Why is this? Clearly the menu is not reading the AJAX-constructed node tree the same way as the PHP-constructed one.

Thanks,
Nick

Answer 1

Recommend you to start over your work by using jQuery UI – Accordion. Much cleaner & effective.