No complicated code. Just a tiny script:
HTML:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
$(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); }); }); |