Logo
My Journal
Blog

Timeline

Blog

Javascript/CSS Accordion Menu

I always seem to need a quick and easy accordion menu for those sites that have way too many links to display but don’t really have a long page to show them all. This crazy simple accordion menu makes showcasing those links easy and elegant with a very simple to edit code.

Javascript (in the <head> secation)

<!-- Link To jQuery file (needed) -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">// <![CDATA[

// ]]></script>
<!-- Link To javascript file (Change path to where you upload the file to) -->
<script type="text/javascript" src="js/accordian.js">// <![CDATA[

// ]]></script>

CSS (in the <head> secation)

<!-- Link To styles for accordians (Add to the css section and delete this) -->
	<link href="css/accordian.css" rel="stylesheet" type="text/css" />

HTML (In the <body> section)

</pre>
<div id="accordian_wrapper">
<div>Main Area</div>
<div>
<ul>
	<li><a href="link.html">Community Link</a></li>
	<li><a href="link.html">Community Link</a></li>
</ul>
</div>
<div>Main Area 2</div>
<div>
<ul>
	<li><a href="link.html">Community Link</a></li>
	<li><a href="link.html">Community Link</a></li>
</ul>
</div>
<div>Main Area 3</div>
<div>
<ul>
	<li><a href="link.html">Community Link</a></li>
	<li><a href="link.html">Community Link</a></li>
</ul>
</div>
<div>Main Area 4</div>
<div>
<ul>
	<li><a href="link.html">Community Link</a></li>
	<li><a href="link.html">Community Link</a></li>
</ul>
</div>
</div>
<pre>

[button color=”Accent-Color” size=”medium” url=”http://www.dottdesign.ca/demos/AccordianMenu/accordian.html” text=”Demo”] Accordian (262 downloads)

Leave A Comment