Connecting an HTML tag to a CSS class with Javascript

programming web dev
1

Hello,

I’m a newbie in web development, and I really need help on how to connect an HTML tag to a CSS class with Javascript. The content of the HTML tag itself will be inserted to the page through an XML file (which in turn, is being inserted to the page with Javascript).

It’s for the lyrics section of a website, and I’m looking to do something like this for it:
http://roshanbh.com.np/examples/exapandable-panel/
And this is the tutorial I followed for the Jquery collapsible panel:
http://roshanbh.com.np/2008/03/expandable-collapsible-toggle-pane-jquery.html

and I’m planning to have the whole thing to be inserted to the page with pure XML, so that it would be easy for the client to update the website in the future (new tab will appear everytime the client update the XML file, etc.).

The Jquery collapsible panel seems to rely heavily on the CSS classes.

This is what I have so far:
<div class=“msg_list”>

CSS

<style type=“text/css”>
body {
margin: 10px auto;
width: 570px;
font: 75%/120% Verdana,Arial, Helvetica, sans-serif;
}
p {
padding: 0 0 1em;
}
.msg_list {
margin: 0px;
padding: 0px;
width: 383px;
}
.msg_head {
padding: 5px 10px;
cursor: pointer;
position: relative;
background-color:#FFCCCC;
margin:1px;
}
.msg_body {
padding: 5px 10px 15px;
background-color:#F4F4F8;
}
</style>

*** end CSS ***

inserting the title with XML

&lt;script type="text/javascript"&gt;
    if (window.XMLHttpRequest) {
      xhttp=new XMLHttpRequest();
  } else {
      xhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xhttp.open("GET","xml/musicpage_lyrics.xml",false);
xhttp.send("");
xmlDoc=xhttp.responseXML;

var x=xmlDoc.getElementsByTagName("songs");
for (i=0;i&lt;x.length;i++) {
    document.write(x*.getElementsByTagName("title")[0].childNodes[0].nodeValue);
    document.write("&lt;br&gt;");
  }
&lt;/script&gt;

end of inserting the title with XML

inserting lyric with XML

&lt;script type="text/javascript"&gt;

    if (window.XMLHttpRequest) {
      xhttp=new XMLHttpRequest();
  } else {
      xhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xhttp.open("GET","xml/musicpage_lyrics.xml",false);
xhttp.send("");
xmlDoc=xhttp.responseXML;

var x=xmlDoc.getElementsByTagName("songs");
for (i=0;i&lt;x.length;i++) {
    document.write("&lt;p&gt;");
      document.write(x*.getElementsByTagName("lyric")[0].childNodes[0].nodeValue);
    document.write("&lt;/p&gt;");
  }
&lt;/script&gt;

end of inserting lyric with XML

animate the Jquery collapsible panel

&lt;script type="text/javascript" src="jquery.js"&gt;&lt;/script&gt;

<script type=“text/javascript”>
$(document).ready(function(){
//hide the all of the element with class msg_body
$(".msg_body").hide();
//toggle the componenet with class msg_body
$(".msg_head").click(function(){
$(this).next(".msg_body").slideToggle(600);
});
});
</script>

end of animate Jquery collapsible panel

I tried adding the class by doing something like this in the JS code:
document.write("<p class=“msg_body”>");

but it doesn’t work.
Please let me know if anyone can help, or direct me to a better solution.
Thanks before! :slight_smile: