Discussion on: Accordion jQuery examples with source code

View post

Very nice. You can also use jQuery UI which already has an accordion system you can style. It also has useful settings. I actually just recently created a small script to create dynamic drop downs where ever I want without needing to setup jQuery code for them.

.nwda-accordion is the class container to trigger an accordion.

jQuery( document ).ready( function( $ ) {

    $('.nwda-accordion').each(function(){

        if ( $(this).data("settings") ) {

            var dataSettings = $(this).data("settings")

            if  ( typeof dataSettings !== 'undefined' ) {
                var accordionSettings = JSON.parse( dataSettings.replace(/'/g, '"') );              
            }

            if ( typeof accordionSettings !== 'undefined' && Array.isArray( accordionSettings ) ) {
                $(this).accordion( accordionSettings );
            } else {
                $(this).accordion({ header: 'h3', collapsible: true, active: false, heightStyle: 'content' });
            }

        } else {
            $(this).accordion({ header: 'h3', collapsible: true, active: false, heightStyle: 'content' });
        }

    });

});

Usage HTML

<div class="nwda-accordion" data-settings="{ 'header': 'h3', 'collapsible': 'false', 'active': 'true', 'heightStyle': 'content' }">
<h3>Accordion Header</h3>
<div><strong>Testing!</strong></div>
</div>