June 19, 200818 yr 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>
Create an account or sign in to comment