[RESOLVED] Accordion XML Help

**TommyR** · 04-19-2012 01:24 PM

Hello, I am a university student in the uk and have recently started learning JavaScript and jQuery. I need to make an accordion that dynamically loads XML. I believe this is known as an xml parse. I have managed to populate the accordion with the data from the xml file, however I need to be able to separate the members of staff by their role within the university. There are three types of role academic, administrative and support staff. At the present time I can only get them to populate the first section (academic) of the accordion so if anyone could help me on separating/filtering them into the correct part of the accordion it would be greatly appreciated. Thanks in advanced and sorry if this is the wrong section

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
var xmlDoc; //holds the XML file
var xmlSource = "staff.xml";

try //Internet Explorer
{
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = false;
xmlDoc.load(xmlSource);
} catch (e) {
try //Firefox, Mozilla, Opera, etc.
{
xmlhttp = new window.XMLHttpRequest();
xmlhttp.open("GET", xmlSource, false);
xmlhttp.send(null);
xmlDoc = xmlhttp.responseXML.documentElement;
} catch (e) {
alert(e.message);
}
}
</script>
<script type="text/javascript">
$(document).ready(function() {

$('div.accordionButton').click(function() {
$('div.accordionContent').slideUp('normal');
$(this).next().slideDown('normal');
});

$("div.accordionContent").hide();

});
</script>

<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<div class="accordionButton">Academic Staff</div>
<div class="accordionContent" id="acordionStaff">
<script type="text/javascript">
if (xmlDoc != null) {
document.write("<table border='1' cellpadding='5' width='100%'>");
document.write("<tr>");
document.write("<th><strong>Image</strong></th>");
document.write("<th><strong>Name</strong></th>");
document.write("<th><strong>Surname</strong></th>");
document.write("<th><strong>Role</strong></th>");
document.write("<th><strong>Type</strong></th>");
document.write("<th><strong>Email</strong></th>");
document.write("<th><strong>Phone</strong></th>");
document.write("</tr>");
var x = xmlDoc.getElementsByTagName("Staff");
for (i = 0; i < x.length; i++) {
document.write("<tr>");
document.write("<td>");
document.write("<img src=" + x[i].getElementsByTagName("Image")[0].childNodes[0].nodeValue) + "/>";
document.write("</td>");

document.write("<td>");
document.write(
x[i].getElementsByTagName("First_Name")[0].childNodes[0].nodeValue);
document.write("</td>");

document.write("<td>");
document.write(
x[i].getElementsByTagName("Surname")[0].childNodes[0].nodeValue);
document.write("</td>");

document.write("<td>");
document.write(
x[i].getElementsByTagName("Role")[0].childNodes[0].nodeValue);
document.write("</td>");

document.write("<td>");
document.write(
x[i].getElementsByTagName("Type")[0].childNodes[0].nodeValue);
document.write("</td>");

document.write("<td>");
document.write(
x[i].getElementsByTagName("Email")[0].childNodes[0].nodeValue);
document.write("</td>");

document.write("<td>");
document.write(
x[i].getElementsByTagName("Phone")[0].childNodes[0].nodeValue);
document.write("</td>");
document.write("</tr>");
}
document.write("</table>");
}
</script>
</div>
<div class="accordionButton">Administrative Staff</div>
<div class="accordionContent">Administrative Staff</div>
<div class="accordionButton">Support Staff</div>
<div class="accordionContent">Support Staff</div>

</div>

<div id="acordionStaff"></div>
</body>
</html>

**TommyR** · 04-19-2012 02:15 PM

sorry i posted this twice as i didn't know how to delete this as the description was incorrect

Thread: [RESOLVED] Accordion XML Help

Thread Tools

Display

Hybrid View

[RESOLVED] Accordion XML Help

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions