Horizontal Accordion using the Tabs

by duclet

HTML

<script src="https://github.com/jquerytools/jquerytools/raw/dev/src/tabs/tabs.js"></script>
<link rel="stylesheet" href="http://static.flowplayer.org/tools/css/tabs-accordion-horizontal.css">
<div id="accordion">

    <!-- accordion header #1 -->
    <img src="http://static.flowplayer.org/img/title/streaminge.png" />
    
    <div style="width:200px;">
        <h3>First pane</h3>
        <p>
            Consectetur adipiscing elit. Praesent bibendum eros ac nulla. Integer vel lacus ac neque viverra.
        </p>
    </div>
    
    <img src="http://static.flowplayer.org/img/title/flash.png" />
    
    <div>
        <h3>Second pane</h3>
        <p>
            Cras diam. Donec dolor lacus, vestibulum at, varius in, mollis id, dolor. Aliquam erat volutpat. 
        </p>
    </div>

    <img src="http://static.flowplayer.org/img/title/streaming.png" />
    
    <div>
        <h3>Third pane</h3>
        <p>
            Non lectus lacinia egestas. Nulla hendrerit, felis quis elementum viverra, purus felis egestas magna.
        </p>
    </div>    

</div>

JavaScript

$("#accordion").tabs("#accordion div", {
    tabs: 'img', 
    effect: 'horizontal'
});