Submit your widget
HomeAccordionNice horizontal accordion with jQuery plugin

Nice horizontal accordion with jQuery plugin

Created 12 years ago   Views 25048   downloads 6620    Author nicolahibbert
Nice horizontal accordion with jQuery plugin
View DemoDownload
104
Share |

The plugin works correctly in ie8 & ie9, it does not work in ie9 switched to ie8 standards mode, or ie9 compatibility view. If you’re using ie9 as ie8 to debug, the tabs will only be clickable at the top, so please test in ie8 native. Compatibility mode should not be triggered if you use a strict doctype.

1. Include jQuery, the liteAccordion CSS and the liteAccordion JavaScript files in your page:

<head>
    <link rel="stylesheet" href="liteAccordion.css">
</head>
<body>
    ... <!-- Before the closing body tag -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script src="liteaccordion.jquery.js"></script>
</body>

2. Insert the basic liteAccordion markup into your page:

<div class="accordion">
    <ol>
        <li>
            <h2><span>Slide One</span></h2>
            <div></div>
        </li>
        <li>
            <h2><span>Slide Two</span></h2>
            <div></div>
        </li>
        <li>
            <h2><span>Slide Three</span></h2>
            <div></div>
        </li>
        <li>
            <h2><span>Slide Four</span></h2>
            <div></div>
        </li>
        <li>
            <h2><span>Slide Five</span></h2>
            <div></div>
        </li>
    </ol>
    <noscript>
        <p>Please enable JavaScript to get the full experience.</p>
    </noscript>
</div>

3. Call the plugin

<script>
    $('#yourdiv').liteAccordion();
</script>

 

You might also like