JS accordion script with XML loaded data

programming web dev
1

I’m attempting to create an accordion menu using data loaded from an XML file, and parsed with javascript. I can successfully load the data, but getting the accordion to work is another matter entirely.

The closest I’ve come is using a jQuery plugin script by a gent named Ryan Stemkoski. I’ve combined it into the script I’m using to write the XML:

function getTheFile(theFile){ 
xmlhttp.open("GET",theFile,false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML; 
document.getElementById("accordion").innerHTML="";//this clears out any data already in accordion div
person=xmlDoc.getElementsByTagName("author");//walk the tree: looking at all data sets with this tag name...
for(i=0;i<person.length; i++){
	var writer=(person*.getElementsByTagName("namer")[0].childNodes[0].nodeValue);
	var bookA=(person*.getElementsByTagName("book1")[0].childNodes[0].nodeValue);
	var bookB=(person*.getElementsByTagName("book2")[0].childNodes[0].nodeValue);
	var bookC=(person*.getElementsByTagName("book3")[0].childNodes[0].nodeValue);
	//create the div that is the accordion button
	var divButton=document.createElement("div");
	divButton.className="accordionButton";
	var buttonText=document.createElement("h3");
	buttonText.innerHTML=writer;
	divButton.appendChild(buttonText);
	//create the div that will hold the content; appendChild to the divButton
	var divContent=document.createElement("div");
	divContent.className="accordionContent";	
	//start creating the tags for the list items that will be the accordion menu
	var ul_1=document.createElement("ul");
//edited for clarity...
	var acc="accordion";
	li_2.innerHTML=bookA;

	divContent.appendChild(ul_1);
//appending additional elements...
	divButton.appendChild(divContent);
	document.getElementById(acc).appendChild(divButton);
	}
	{
	 //script by  Ryan Stemkoski 
	//ACCORDION BUTTON ACTION (ON CLICK DO THE FOLLOWING)
	$('.accordionButton').click(function() {
		//REMOVE THE ON CLASS FROM ALL BUTTONS
		$('.accordionButton').removeClass('on');
		//NO MATTER WHAT, WE CLOSE ALL OPEN SLIDES
	 	$('.accordionContent').slideUp('normal');
		//IF THE NEXT SLIDE WASN'T OPEN THEN OPEN IT
		if($(this).next().is(':hidden') == true) {
			//ADD THE ON CLASS TO THE BUTTON
			$(this).addClass('on');
			//OPEN THE SLIDE
			$(this).next().slideDown('normal');
		 } 
	 });
	/*$('.accordionContent').hide();*/
}
}

I know it looks like a lot; I’ve edited out elements not pertinent to the problem. The important things to note are this - accordionButton and accordionContent are CSS classes that style particular elements, and that the javascript looks for to control the accordion menu.

And here’s the page: loading as an expanded list.
What happens is this: when I don’t hide all the content, the entire unit behaves as a button. Click any spot and the entire list collapses. But then it won’t expand at all when you click again.

I suspect that maybe one issue is the script calls to ‘.accordionButton’, and can’t distinguish between one div with class of accordionButton and another. I tried to implement a “for” loop, but that did nothing.

So, all you smart guys - Is it even possible to do what I’m trying to do?If so, could you point me in the right direction?

thanks as always