JavaScript Forum

**wildbackpacker** · 05:02 PM

I am trying to put a accordion just like Dezinerfolio's onto a high school's new website within each department so that you can click on each teacher and it will give some short information on the right side. The thing is though that I don't want them all on external pages, but rather all the information on that page.There isn't a sample up there right now, but I think the style sheets from the accordion and my pages are conflicting and it doesn't work correctly. Is there another script like this to load content?

**burnsyy** · 05-26-2009, 11:06 AM

that menu is done in CSS-P Element

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simple Javascript Accordions - by www.dezinerfolio.com</title>
<style type="text/css">
* {
 margin:0;
 padding:0;
 list-style:none;
}
body {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 11px;
 margin:10px;
}
#basic-accordian{
 border:5px solid #EEE;
 padding:5px;
 width:375px;
 position:absolute;
 left:50%;
 top:50%;
 margin-left:-175px;
 z-index:2;
 margin-top:-100px;
}
.accordion_headings{
 padding:5px;
 background:#99CC00;
 color:#FFFFFF;
 border:1px solid #FFF;
 cursor:pointer;
 font-weight:bold;
}
.accordion_headings:hover{
 background:#00CCFF;
}
.accordion_child{
 padding:15px;
 background:#EEE;
}
.header_highlight{
 background:#00CCFF;
}
</style>
<script type="text/javascript" src="accordian.pack.js"></script>
</head>
<body onload="new Accordian('basic-accordian',5,'header_highlight');">
 
<div id="basic-accordian" ><!--Parent of the Accordion-->
<div align="center">Left Navigation</div>
<div style="width:125px; float:left">
  <div id="test1-header" class="accordion_headings header_highlight" >Home</div>
  <div id="test2-header" class="accordion_headings" >About Us</div>
  <div id="test3-header" class="accordion_headings" >Download</div>
</div>
<div style="float:right; width:250px;">
  <div id="test1-content">
 <div class="accordion_child">
     Welcome to the Homepage<br /><br />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc sapien nibh, ultrices vitae, convallis eu, semper ut, leo. Cras nec pede.
    </div>
  </div>
 
  <div id="test2-content">
 <div class="accordion_child">
     Here you will find more about us<br /><br />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc sapien nibh, ultrices vitae, convallis eu, semper ut, leo. Cras nec pede.
    </div>
  </div>
 
  <div id="test3-content">
 <div class="accordion_child">
     and... this is the download section<br /><br />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc sapien nibh, ultrices vitae, convallis eu, semper ut, leo. Cras nec pede.
    </div>
  </div>
</div>
 
 
<a href="02.html" style="float:left">Previous Demo</a>
<a href="04.html" style="float:right;">Next Demo</a>
 
</div><!--End of accordion parent-->
 
 
</body>
</html>

Code for the css for it

Code:

<style type="text/css">
* {
 margin:0;
 padding:0;
 list-style:none;
}
body {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 11px;
 margin:10px;
}
#basic-accordian{
 border:5px solid #EEE;
 padding:5px;
 width:375px;
 position:absolute;
 left:50%;
 top:50%;
 margin-left:-175px;
 z-index:2;
 margin-top:-100px;
}
.accordion_headings{
 padding:5px;
 background:#99CC00;
 color:#FFFFFF;
 border:1px solid #FFF;
 cursor:pointer;
 font-weight:bold;
}
.accordion_headings:hover{
 background:#00CCFF;
}
.accordion_child{
 padding:15px;
 background:#EEE;
}
.header_highlight{
 background:#00CCFF;
}
</style>

**wildbackpacker** · 05-26-2009, 03:12 PM

Thanks burnsyy, but I did find a script afterall. Although, I just realized it isn't compatible in IE. Not good. http://www.webmaster-talk.com/javasc...e-with-ie.html