...

View Full Version : Javascript Accordion



Johnathan1707
05-05-2008, 10:53 PM
<div id="basic-accordian" ><!--Parent of the Accordion-->


<!--Start of each accordion item-->
<div id="test-header" class="accordion_headings header_highlight" >Win Downloads</div>
<!--Heading of the accordion ( clicked to show n hide ) -->

<!--Prefix of heading (the DIV above this) and content (the DIV below this) to be same... eg. foo-header & foo-content-->

<div id="test-content"><!--DIV which show/hide on click of header-->

<!--This DIV is for inline styling like padding...-->
<div class="accordion_child"><a href="win-3di.php">3D/Imageing</a><br />
<a href="win-av.php">Audio Visual</a><br />
<a href="win-web.php">Web Design/Development</a><br />
<a href="win-office.php">Office/Print</a>
</p>
</div>

</div>
<!--End of each accordion item-->


<!--Start of each accordion item-->
<div id="test1-header" class="accordion_headings" >Mac Downloads</div>
<!--Heading of the accordion ( clicked to show n hide ) -->

<!--Prefix of heading (the DIV above this) and content (the DIV below this) to be same... eg. foo-header & foo-content-->

<div id="test1-content"><!--DIV which show/hide on click of header-->

<!--This DIV is for inline styling like padding...-->
<div class="accordion_child"><a href="mac-3di.php">3D/Imageing</a><br />
<a href="mac-av.php">Audio Visual</a><br />
<a href="mac-web.php">Web Design/Development</a><br />
<a href="mac-office.php">Office/Print
</a></div>

</div>
<!--End of each accordion item-->



<!--Start of each accordion item-->
<div id="test2-header" class="accordion_headings" >Photoshop</div>
<!--Heading of the accordion ( clicked to show n hide ) -->

<!--Prefix of heading (the DIV above this) and content (the DIV below this) to be same... eg. foo-header & foo-content-->

<div id="test2-content"><!--DIV which show/hide on click of header-->

<!--This DIV is for inline styling like padding...-->
<div class="accordion_child"><a href="ps-brushes.php">Brushes</a><br />
<a href="ps-patterns.php">Patterns
</a><br />
<a href="ps-gradients.php">Gradients
</a><br />
<a href="ps-plugins.php">Plugins</a><br />
<a href="ps-presets.php">Presets</a></div>

</div>
<!--End of each accordion item-->

<!--Start of each accordion item-->
<div id="test2-header" class="accordion_headings" >Scripts</div>
<!--Heading of the accordion ( clicked to show n hide ) -->

<!--Prefix of heading (the DIV above this) and content (the DIV below this) to be same... eg. foo-header & foo-content-->

<div id="test2-content"><!--DIV which show/hide on click of header-->

<!--This DIV is for inline styling like padding...-->
<div class="accordion_child"><a href="scripts-php.php">PHP</a><br />
<a href="scripts-js.php">Javascript </a><br />
<a href="scripts-html.php">(X)HTML </a><br />
<a href="scripts-css.php">CSS</a><br />
<a href="scripts-xml.php">XML</a></div>

</div>
<!--End of each accordion item-->

<!--Start of each accordion item-->
<div id="test2-header" class="accordion_headings" >Other</div>
<!--Heading of the accordion ( clicked to show n hide ) -->

<!--Prefix of heading (the DIV above this) and content (the DIV below this) to be same... eg. foo-header & foo-content-->

<div id="test2-content"><!--DIV which show/hide on click of header-->

<!--This DIV is for inline styling like padding...-->
<div class="accordion_child">

<script type="text/javascript">
//<![CDATA[
<!--
google_ad_client = "pub-1424534937120197";
/* 200x90, created 4/27/08 */
google_ad_slot = "3527801093";
google_ad_width = 200;
google_ad_height = 90;
//-->
//]]>
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script><br />

</div>
</div>
</div>



Anyone know why the Scripts and Other tabs aren't cloding and just staying open? The original script had three tabs and I just copied and pasted the stuff I though I needed but it isn't working properly. Here's the link to the page http://www.jbportal.net/downloads_copy.php

Oh, and how can I make it start closed?

tomws
05-06-2008, 12:51 AM
They have the same IDs as the Photoshop block. IDs should be unique for the page.

Don't you hate it when you copy/paste and then forget to go back and edit? Gets me every time.

Johnathan1707
05-06-2008, 12:55 AM
THANKS so much. And yea I forget to go back and change important stuff like that alot :P.

Johnathan1707
05-06-2008, 12:59 AM
Ok I changed them but it still doesn't work.

Johnathan1707
05-06-2008, 01:02 AM
Ok I didn't do it properly but it still wasn't doing what I wanted it to. Could you maybe fix it for me please...

Johnathan1707
05-06-2008, 01:08 AM
Got it all sorted :P thanks for your help.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum