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:

How a Loop Through a JavaScript Object?

How a Loop through a JavaScript object?Javascript Objects are Variables Containing Variables.In Java…

How to Search Item in List in JavaScript

Multi Step Form Using HTML and JavaScript

Form is the important part in web design. Form is the primary interface to the user by which user is…

How to Create Custom CSS, jQuery Autocomplete Plugin

Web developers often use autocomplete features in websites as a part of their work. Yet lot of good …

How to Make Sticky Sidebar Using jQuery and CSS

Sticky sidebar is an essential part of web development. Not in all cases but for some cases where ou…

Selectors, Animation, and AJAX – jQuery Tutorial And Examples

By now I’m sure you have grasped at least the basics and simplicity of the jQuery library. Now it’s …