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
Post a Comment