Simple Accordion Code – Raul Sanchez

No complicated code. Just a tiny script:

HTML:

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

<li>

<div class="link">License type<i class="fa fa-angle-down"></i></div>

<label class="form-check-label" for="exampleCheck1">Basic single documents</label>

</div>

<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>

<label class="form-check-label" for="exampleCheck4">Agreements</label>

</div>

<label class="form-check-label" for="exampleCheck5">Forms</label>

</div>

<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);
    });

});

$(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 Cancel reply