Woco Accordion: A simple, user-friendly and lightweight jQuery accordion plugin with smooth animations powered by CSS3 transitions.

A simple, user-friendly and lightweight jQuery accordion plugin with smooth animations powered by CSS3 transitions.

This is the new version of Woco Accordion and comes with more options and features.

Download: https://github.com/chooowai/woco-accordion

Demonstration: http://chooowai.github.io/woco-accordion/

Plugin homepage: http://chooowai.github.io/woco-accordion/

Implementation:

<html>
     <head>
                <script src="jquery-1.11.3.min.js"></script>
                <script src="woco.accordion.min.js"></script>
                <link href="woco-accordion.css" rel="stylesheet">
     </head>
     <body>
                <div class="accordion">
                        <h1>Section 1</h1>
                        <div>
                                Content 1<br>Content 1<br>Content 1<br>Content 1<br>
                        </div>
                        <h1>Section 2</h1>
                        <div>
                                Content 2<br>Content 2<br>Content 2<br>Content 2<br>
                        </div>
                        <h1>Section 3</h1>
                        <div>
                                Content 3<br>Content 3<br>Content 3<br>Content 3<br>
                        </div>
                </div>
                <script>
                        $(".accordion").accordion();
                </script>
     </body>
</html>

Options:

firstChildExpandBooleanDefault : true – whether the first section is expanded or not
multipleExpandBooleanDefault : false – whether expanding mulitple section is allowed or not
slideSpeedIntegerDefault : 500 – slide animation speed
dropDownIconStringDefault : “&#9660” – drop down icon

Screenshots:

Creating a JavaScript Library

I recently wrote a JavaScript library for creating random colors and color schemes, and while I foun…

s3Slider jQuery Plugin & Tutorial

The s3Slider jQuery plugin is made by example of jd`s smooth slide show script. Usage: HTML: Sample …

jQuery Optimization: Avoid Unnecessary Selector

Common subexpression elimination is a common way to optimize any programming code. Doing unnecessary…

Fading Links Using jQuery: dwFadingLinks

Earlier this month, we posted a MooTools script that faded links to and from a color during the mous…

jQuery Flash Plugin

This jQuery plugin is for embedding Flash movies. Pages are progressively enhanced when Flash and Ja…

jQuery Optimization: Optimize Selector

We can also optimize our selector other than being a bit specific on our selector. The key to optimi…

jQuery drop down menu: droppy

Quick and dirty nested drop-down menu in the jQuery style. I needed a nav like this for a recent pro…