Can't get Javascript Accordion Panels to expand and contract

**MichiKen** · 07-11-2009 07:35 PM

I'm trying to get XML data to display in expandable and contractable Accordion panels. The XML data does display but the panels will not expand or contract. When clicking on an H2 heading the background color does change like I've defined in the CSS but no expansion or contraction of the panels.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="prototype-1.6.0.3.js"></script>
<title>Displaying XML data using Accordion</title>
<style type="text/css"> 
body	{ 
	   font-size: 12pt;
           font-family: Arial, Tahoma, Verdana;
 	}
 
.accordionItem h2 {
                    color: white;
	            font-size: 16pt;
                    background-color: #0000AA;
                    border: 1px solid #00EE00;
		  }
 
.accordionItem div {
                     padding: 1em 1em;
                     background-color: #FFFFFF;
                     color: #000000;
                   }
 
.accordionItem.hide h2 { color: white;
                         background-color: #CC66FF;
                       }
 
accordionItem.hide div { display:none; }
                         
                     
                 
 
.showIt {
           font-size: 14pt;
           color: green;
           font-family: Arial, Tahoma, Verdana;
           border: thick solid;
           padding: 10px;
 
         }
 
b        { font-size: 16pt;
           color:#000000;
         }
          
</style>
 
<script type="text/javascript" language="javascript"> 
<!--The object detection code -->
var req = false;
// Is there support for native XHR object?: IE7+, Firefox, Safari, Opera
     if (window.XMLHttpRequest)
    {
     req = new XMLHttpRequest();
     //create an XMLHttpRequest object
    }
 
     else if (window.ActiveXObject)
     //check for Version 6
    {
     req = new ActiveXObject('MSXML2.XMLHTTP.6.0');
     //create an ActiveX XMLHTTP component
    }
 
     if (!req)
    {
    req = new ActiveXObject('MSXML2.XMLHTTP');
    //fallback to version 3
    }
 
    
 
function runIt()
{
    if (req)
    { 
    //Request data to be retrieved from the server
 
    req.onreadystatechange = function() 
        {
                if (req.readyState == 4 && req.status == 200)
            {
            var response = req.responseXML;
            readXML(response);
                 }
 
        }
    req.open("GET", "MusicianList.xml", true);
    req.send(null);
    }
}
 
 
function readXML(response)
{
    var myResponse = response.documentElement;
    var myMusician = myResponse.getElementsByTagName("musician");
    var place1 = document.getElementById("musicians");
    var place2 = document.getElementById("genres"); 
    var place3 = document.getElementById("hitsongs");
    for (var i=0; i < myMusician.length; i++)
    {
     place1.innerHTML += myMusician[i].getElementsByTagName("name")[0].firstChild.nodeValue + "<br>";
     place2.innerHTML += myMusician[i].getElementsByTagName("genre")[0].firstChild.nodeValue + "<br>";
     place3.innerHTML += myMusician[i].getElementsByTagName("hitsong")[0].firstChild.nodeValue + "<br>";  
    }
    //<![CDATA[
 
    var accordionItems = new Array();
 
    
 
      // Grab the accordion items from the page
      var divs = document.getElementsByTagName( 'div' );
      for ( var i = 0; i < divs.length; i++ ) {
        if ( divs[i].className == 'accordionItem' ) accordionItems.push( divs[i] );
      }
 
      // Assign onclick events to the accordion item headings
      for ( var i = 0; i < accordionItems.length; i++ ) {
        var h2 = getFirstChildWithTagName( accordionItems[i], 'H2' );
        h2.onclick = toggleItem;
      }
 
      // Hide all accordion item bodies except the first
      for ( var i = 1; i < accordionItems.length; i++ ) {
        accordionItems[i].className = 'accordionItem hide';
      }
   
 
    function toggleItem() {
      var itemClass = this.parentNode.className;
 
      // Hide all items
      for ( var i = 0; i < accordionItems.length; i++ ) {
        accordionItems[i].className = 'accordionItem hide';
      }
 
      // Show this item if it was previously hidden
      if ( itemClass == 'accordionItem hide' ) {
        this.parentNode.className = 'accordionItem';
      }
    }
 
    function getFirstChildWithTagName( element, tagName ) {
      for ( var i = 0; i < element.childNodes.length; i++ ) {
        if ( element.childNodes[i].nodeName == tagName ) return element.childNodes[i];
      }
    }
 
     //]]>
 
 
 
 
 
  }
 
 
 
 
 
//-->
</script>
</head>
<body onload="runIt()">
<h1>Click on a Panel to get more information on the musician</h1> 
 
<div class="accordionItem">
<h2>Musicians</h2>
<div id="musicians">   </div>
</div>
 
<div class="accordionItem">
<h2>Genres</h2>
<div id="genres">   </div>
</div>
 
<div class="accordionItem">
<h2>Their Hitsongs</h2>
<div id="hitsongs">   </div>
</div>
 
 
 
</body>
</html>

XML file:

Code:

<?xml version="1.0" encoding="utf-8" ?> 
- <musicians>
- <musician>
  <name>Bruce Springsteen</name> 
  <genre>Rock</genre> 
  <hitsong>Born in the USA</hitsong> 
  </musician>
- <musician>
  <name>B.B. King</name> 
  <genre>Blues</genre> 
  <hitsong>The Thrill Is Gone</hitsong> 
  </musician>
- <musician>
  <name>Tim McGraw</name> 
  <genre>Country</genre> 
  <hitsong>Live Like You Were Dying</hitsong> 
  </musician>
- <musician>
  <name>Gordon Lightfoot</name> 
  <genre>Folk</genre> 
  <hitsong>Carefree Highway</hitsong> 
  </musician>
- <musician>
  <name>Glenn Miller</name> 
  <genre>Big Band</genre> 
  <hitsong>In The Mood</hitsong> 
  </musician>
  </musicians>

**holyhttp** · 07-12-2009 02:48 PM

The problem might stem for your attempt to save the accordion objects in an array.
if ( divs[i].className == 'accordionItem' ) accordionItems.push( divs[i] );

use
accordionItems.push( divs[i].id );
to store ids in the array

What I would recommend instead is to use the accordionItems array to save those divs IDs instead of the objects themselves.

Then in each function where you currently have accordionItems[i] use instead
document.getElementById(accordionItems[i])

Thread: Can't get Javascript Accordion Panels to expand and contract

Thread Tools

Display

Can't get Javascript Accordion Panels to expand and contract

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions