Submit your widget

Nice horizontal accordion with jQuery plugin

Created 8 years ago   Views 38008   downloads 10732    Author nicolahibbert
Nice horizontal accordion with jQuery plugin
View DemoDownload 402.4 KB
186
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>