cyberaktiv / menu_accordion

Menu accordion on native javascript with CSS3

One level menu-accordion

Menu accordion on native javascript with CSS3

Live demo here.

View in close state:

View in open state:

Include:

<link rel="stylesheet" type="text/css" href="menu-accordion.css">
<script type="text/javascript" src="menu-accordion.js"></script>

Example use:

Include in javascript

    window.onload = function() {
        // ...
        MenuAccordion("menu-accordion");
        // ...
    }

Include in html

<div id="menu-accordion">
    <p>First</p>
    <span>
        ...
        First content block
        ...
    </span>
    <p>Second</p>
    <span>
        ...
        Second content block
        ...
    </span>
    <p>Third</p>
    <span>
        ...
        Third content block
        ...
    </span>
    <p>Fourth</p>
    <span>
        ...
        Fourth content block
        ...
    </span>
    <p>Fifth</p>
    <span>
        ...
        Fifth content block
        ...
    </span>
</div>