JavaScript application instance: web page collapse Menu

javascript| Menu | web | application Example

JS Library from:http://moofx.mad4milk.net/(MOOFX Super lightweight Javascrip effect class library)

Just click here to see the effect.

Usage:

1. Add JS Library

CODE:
<script src= "Prototype.lite.js" type= "Text/javascript" ></script>
<script src= "Moo.fx.js" type= "Text/javascript" ></script>
<script src= "Moo.fx.pack.js" type= "Text/javascript" ></script>

2. Establish the XHTML structure:

CODE:
<div id= "Container" >

<div class= "Content" >
<p> (1) Place content </p>
</div>

<div class= "Content" >
<p> (2) Place content </p>
</div>

<div class= "Content" >
<p> (3) Place content </p>
</div>
</div>

3. Call JS:

CODE:

<script type= "Text/javascript" >
Define the number of contents groups for all the content that will be displayed
var contents = document.getelementsbyclassname (' content ');
Defines the number of contents groups as all headings, as well as clickable expansion buttons
var toggles = document.getelementsbyclassname (' title ');

Call MOOFX JS Library
var myaccordion = new FX. Accordion (
Toggles, contents, {opacity:true, duration:400}//opacity Determine whether there is alpha transparency change, duration determine the action all the time
);
Myaccordion.showthishideopen (Contents[0]); Open first content by default
</script>

Complete.
It's simple and it works.
If you want to have a good interface, customize the CSS Bar

Download