javascript - Jquery accordian close -


i'm working on creating mobile accordion nav website. have basic accordion set up, problem having when open 1 tab want other tabs automatically close 1 tab can opened @ once. i've tried few things can't work. appreciated. here code - http://codepen.io/anon/pen/ovvzev

// dropdown menu var dropdown = document.queryselectorall('.dropdown'); var dropdownarray = array.prototype.slice.call(dropdown, 0); dropdownarray.foreach(function (el) {     var button = el.queryselector('a[data-toggle="dropdown"]'),         menu = el.queryselector('.dropdown-menu'),         arrow = button.queryselector('i.icon-arrow');      button.onclick = function (event) {         if (!menu.hasclass('show')) {             menu.classlist.add('show');             menu.classlist.remove('hide');             arrow.classlist.add('open');             arrow.classlist.remove('close');             event.preventdefault();         } else {             menu.classlist.remove('show');             menu.classlist.add('hide');             arrow.classlist.remove('open');             arrow.classlist.add('close');             event.preventdefault();         }     }; });  element.prototype.hasclass = function (classname) {     return this.classname && new regexp("(^|\\s)" + classname + "(\\s|$)").test(this.classname); }; 

what's best way go doing this?

here's solution: http://codepen.io/merlinmason/pen/kpobrm

$(".accordian .title").on("click", function () {   var content = $(this).parent().find(".content");    if ($(content).hasclass("open")) {     $(content).slideup(400).removeclass("open");   } else {     $(".content.open").slideup(400).removeclass("open");     $(content).slidedown(400).addclass("open");   } }); 

in short - checks if accordion open, if closes it, if not finds open accordions, closes them , opens current one.

key things: - using class "open" preserve state - using "this" reference accordion being actioned


Comments

Popular posts from this blog

toolbar - How to add link to user registration inside toobar in admin joomla 3 custom component -

linux - disk space limitation when creating war file -