jQuery.Toggle.js

HTML

<div>
     <h3>With defaut opts</h3>
</div>
<div class="test">test</div>
<div class="test">test</div>
<div class="test">test</div>
<div class="test">test</div>
<div class="test">test</div>
<div>
     <h3>With opt JtoggleAll ( JtoggleAll:1 )</h3>
</div>
<div class="test1">test</div>
<div class="test1">test</div>
<div class="test1">test</div>
<div class="test1">test</div>
<div class="test1">test</div>
<div>
     <h3>With opt JtoggleClass ( JtoggleClass:'tazz' )</h3>
</div>
<div class="test2">test</div>
<div class="test2">test</div>
<div class="test2">test</div>
<div class="test2">test</div>
<div class="test2">test</div>
<div>
     <h3>With opt JtoggleHover ( JtoggleHover:1 )</h3>
</div>
<div class="test3">test</div>
<div class="test3">test</div>
<div class="test3">test</div>
<div class="test3">test</div>
<div class="test3">test</div>

<div>
    <h3>With opt JS Callback ( JtoggleOn/jToggleOff )</h3>
</div>
<div class="test4">test</div>
<div class="test4">test</div>
<div class="test4">test</div>
<div class="test4">test</div>
<div class="test4">test</div>

CSS

.test, .test1, .test2, .test3, .test4 {
        -webkit-transition: all 0.5s ease-in-out;
        -moz-transition: all 0.5s ease-in-out;
        -o-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
        cursor:pointer;
    }
    .jToggle {
        padding-left:20px;
        color:#335897;
    }
    .tazz {
        margin-left:20px;
        color:#139875;
    }

JavaScript

(function ($) {

    // jQuery plugin definition
    $.fn.jToggle = function (params) {

        // merge default and user parameters
        params = $.extend({
            jToggleHover: 0,
            jToggleAll: 0,
            jToggleClass: 'jToggle',
            jToggleOn: function () {},
            jToggleOff: function () {}
        }, params);

        // traverse all nodes
        var selector = this;
        selector.each(function () {

            // express a single node as a jQuery object
            var el = $(this),
                index = $(this).index();

            if (params.jToggleHover == 1) {
                $(el).on({
                    mouseenter: function () {
                        el.addClass(params.jToggleClass);
                        params.jToggleOn.call(this);
                    },
                    mouseleave: function () {
                        el.removeClass(params.jToggleClass);
                        params.jToggleOff.call(this);
                    }
                });

            } else {
                el.on('click', function () {
                    // detect toggle status
                    if (el.hasClass(params.jToggleClass)) {
                        el.removeClass(params.jToggleClass);
                        params.jToggleOff.call(this);
                    } else {
                        if (params.jToggleAll == 1) {
                            selector.removeClass(params.jToggleClass);
                            params.jToggleOff.call(this);
                        }
                        el.addClass(params.jToggleClass);
                        params.jToggleOn.call(this);
                    }
                });
            }

        });

        // allow jQuery chaining
        return this;
    };

})(jQuery);


// example d'utilisation

$(document).ready(function () {
    $('.test').jToggle();
    
    $('.test1').jToggle({
        jToggleAll: 1
    });
    
    $('.test2').jToggle({
       ...