www.webdeveloper.com
Results 1 to 2 of 2

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

  1. #1
    Join Date
    Apr 2008
    Posts
    136

    Can't get Javascript Accordion Panels to expand and contract

    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>

  2. #2
    Join Date
    Nov 2006
    Location
    Oakland
    Posts
    500
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles