Simple Accordion Code

No complicated code. Just a tiny script:

HTML:

<div class="category">
    <ul id="accordion" class="accordion m-0">
        <li>
            <div class="link">License type<i class="fa fa-angle-down"></i></div>
            <ul class="submenu pl-3">
                <div class="form-group  mb-0 pt-2 m-0 form-check">
                    <input type="checkbox" class="form-check-input" id="exampleCheck1">
                    <label class="form-check-label" for="exampleCheck1">Basic single documents</label>
                </div>
                <div class="form-group  mb-0 pb-2 form-check">
                    <input type="checkbox" class="form-check-input" id="exampleCheck2">
                    <label class="form-check-label" for="exampleCheck2">Customizable documents</label>
                </div>
            </ul>
        </li>
        <li>
            <div class="link">Document type<i class="fa fa-angle-down"></i></div>
            <ul class="submenu pl-3">
                <div class="form-group mb-0 m-0 form-check">
                    <input type="checkbox" class="form-check-input" id="exampleCheck4">
                    <label class="form-check-label" for="exampleCheck4">Agreements</label>
                </div>
                <div class="form-group mb-0 form-check">
                    <input type="checkbox" class="form-check-input" id="exampleCheck5">
                    <label class="form-check-label" for="exampleCheck5">Forms</label>
                </div>
                <div class="form-group mb-0 form-check">
                    <input type="checkbox" class="form-check-input" id="exampleCheck6">
                    <label class="form-check-label" for="exampleCheck6">Exhibits</label>
                </div>
            </ul>
        </li>
        <li>
            <div class="link">Other <i class="fa fa-angle-right"></i></div>
        </li>
    </ul>
</div>

Javascript:

$(function () {
    //filter bar js
    var Accordion = function (el, multiple) {
        this.el = el || {};
        this.multiple = multiple || false;

        // Variables privadas
        var links = this.el.find('.link');
        // Evento
        links.on('click', {
            el: this.el,
            multiple: this.multiple
        }, this.dropdown)
    }

    Accordion.prototype.dropdown = function (e) {
        var $el = e.data.el;
        $this = $(this),
            $next = $this.next();

        $next.slideToggle();
        $this.parent().toggleClass('open');

        if (!e.data.multiple) {
            $el.find('.submenu').not($next).slideUp().parent().removeClass('open');
        };
    }

    $('.accordion').each(function(i, item) {
        var accordion = new Accordion($(item), false);
    });

});

Leave a Reply