Displaying XML data in Accordion panels

Wolverine68 · July 1, 2009

I want to extract data from an xml file, then display it in expandable and collapsable accordion panels. The XML data is displayed but the panels are not expandable or collapsable. No error messages, so I don't know why it's not working.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<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>";  
    }

//Assign onclick events to the accordion headings
    
     var h2 = getElementsByTagName("h2");
     h2.onclick = toggleItem;
    

//Hide all accordion item bodies except the first
    
     var accordionItem = getElementById("accordionItem");
     for ( var i=1; i < accordionItem.length; i++ ) {
      accordionItem[i].className = 'accordionItem hide';
     }
  
}

function toggleItem() {

     var itemClass = this.parentNode.className;

//Hide all items

     var accordionItem = getElementById("accordionItem");
     for ( var i=0; i < accordionItem.length; i++ ) {
      accordionItem[i].className = 'accordionItem hide';
     }

//Show this item if it was previously hidden
    if ( itemClass == 'accordionItem hidden') {
      this.parentNode.className = 'accordionItem hide';
    }

  }


//-->
</script>
</head>
<body onload="runIt()">
<h1>Click on a Panel to get more information on the musician</h1> 

<div class="accordionItem" id="accordionItem">
<h2>Musicians</h2>
<div id="musicians">   </div>
</div>

<div class="accordionItem" id="accordionItem">
<h2>Genres</h2>
<div id="genres">   </div>
</div>

<div class="accordionItem" id="accordionItem">
<h2>Their Hitsongs</h2>
<div id="hitsongs">   </div>
</div>




</body>
</html>

Wolverine68 · July 6, 2009

Made some changes but the panels still don't expand or contract:


<!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>";  
    }

//Assign onclick events to the accordion headings
    
     var h2 = document.getElementsByTagName("h2");
     for (var i=0; i < h2.length; i++) {
     h2.onclick = toggleItem;
    } 
    

//Hide all accordion item bodies except the first
    
     var accordionItem = document.getElementById("accordionItem");
     for ( var i=1; i < accordionItem.length; i++ ) {
      accordionItem[i].className = 'accordionItem hide';
     }
  
}

function toggleItem() {

     var itemClass = this.parentNode.className;

//Hide all items

     var accordionItem = document.getElementById("accordionItem");
     for ( var i=0; i < accordionItem.length; i++ ) {
      accordionItem[i].className = 'accordionItem hide';
     }

//Show this item if it was previously hidden
    if ( itemClass == 'accordionItem hidden') {
      this.parentNode.className = 'accordionItem hide';
    }

  }


//-->
</script>
</head>
<body onload="runIt()">
<h1>Click on a Panel to get more information on the musician</h1> 


<div class="accordionItem" id="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>

Sign In

Displaying XML data in Accordion panels

Recommended Posts

Wolverine68

Link to comment

Share on other sites

Wolverine68

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information