http://www.stickmanlabs.com/accordion/
I am trying to implement this javascript into my website
Their code is bloated with inline style sheets and multiple accordions.
What I want is one simple vertical accordion with about four sections and an external style sheet.
I can't get this to work nor do I know where to begin stripping down their code.
What is required to make say - two simple accordions to work?
Any help would be great appreciated, thank you!
Below is my current code
CSS
.accordion_toggle {
display: block;
height: 30px;
width: 800px;
background: url(images/accordion_toggle.jpg) no-repeat top right #a9d06a;
padding: 0 10px 0 10px;
line-height: 30px;
color: #ffffff;
font-weight: normal;
text-decoration: none;
outline: none;
font-size: 12px;
color: #000000;
border-bottom: 1px solid #cde99f;
cursor: pointer;
margin: 0 0 0 0;
}
.accordion_toggle_active {
background: url(images/accordion_toggle_active.jpg) no-repeat top right #e0542f;
color: #ffffff;
border-bottom: 1px solid #f68263;
}
.accordion_content {
background-color: #efefef;
color: #444444;
overflow: hidden;
width: 800px;
}
#container {
width: 800px;
margin-left: auto;
margin-right: auto;
}
And XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script type="text/javascript" src="javascript/prototype.js"></script>
<script type="text/javascript" src="javascript/effects.js"></script>
<script type="text/javascript" src="javascript/accordion.js"></script>
<title>Website Title</title>
</head>
<body>
<div id="container">
<h1 class="accordion_toggle">Accordion title 1</h1>
<div class="accordion_content">
Content goes here 1
</div>
<h1 class="accordion_toggle">Accordion title 2</h1>
<div class="accordion_content">
Content goes here 2
</div></div>
</body>