simple jquery accordion plug-in

by bitstarr

HTML

<div class="js-accordeon">

    <div class="acc-trigger">Panel 1</div>
    <div class="acc-content">Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</div>

    <div class="acc-trigger">Panel 2</div>
    <div class="acc-content">Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</div>

    <div class="acc-trigger">Panel 3</div>
    <div class="acc-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.</div>

</div>

CSS

*, *:before, *:after {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}

body {
    margin: 2em;
    font: 1em/1.4 "Nimbus Sans L", "Freesans", sans-serif;
    color: #444;
}

.js-accordeon { border: 1px solid #ccc }
.js-accordeon .acc-trigger {
    padding: 1ex;
    background: #eee;
    border-bottom: 1px solid #ccc;
}
.js-accordeon .acc-content {
    height: 0;
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-transition: opacity 0.3s ease-out;
    transition: opacity 0.3s ease-out;
}
.js-accordeon .open {
    padding: 1ex;
    height: auto;
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

JavaScript

(function($) {
   $.fn.accordeon = function(options) {
        var settings = {};

        return this.each(function() {
            settings = $.extend({}, $.fn.accordeon.defaults, options || {});
            var $this = $(this),
                trigger = $this.find(settings.trigger),
                content = $this.find(settings.content);

            $this.on('click', settings.trigger, function(e) {
                //e.preventDefault();
                content.removeClass('open');
                if (!$(e.target).hasClass(settings.trigger.slice(1))) {
                    target = $(e.target).parents(settings.trigger);
                }
                else {
                    target = $(e.target);
                }
                target.next().addClass('open');
            });
        });
    };
    $.fn.accordeon.defaults = {
        trigger: '.acc-trigger',
        content: '.acc-content'
    };
    $('div.js-accordeon').accordeon();
})(jQuery);