elkloso elkloso -4 years ago 70
HTML Question

Close all accordion tabs on event

I am using "VMenu" as a jQuery plugin to show a huge accordion on a HTML site, because it supports a very simple structure with only


Now, I want to close all the open accordion tabs with an event/button/...

The plugin creator didn't answer questions so I need your help.

I put the whole code in jsfiddle but it didn't work: https://jsfiddle.net/ekbLLcLd/3/

(function($) {
$.fn.vmenuModule = function(option) {
var obj,
var options = $.extend({
Speed: 220,
autostart: true,
autohide: 1
obj = $(this);

item = obj.find("ul").parent("li").children("a");
item.attr("data-option", "off");

item.unbind('click').on("click", function() {
var a = $(this);
if (options.autohide) {
a.parent().parent().find("a[data-option='on']").parent("li").children("ul").slideUp(options.Speed / 1.2,
function() {
$(this).parent("li").children("a").attr("data-option", "off");
if (a.attr("data-option") == "off") {
function() {
a.attr("data-option", "on");
if (a.attr("data-option") == "on") {
a.attr("data-option", "off");
if (options.autostart) {
obj.find("a").each(function() {

function() {
$(this).parent("li").children("a").attr("data-option", "on");

})(window.jQuery || window.Zepto);

I think it's a simple task but I'm not sure how to do it.

Answer Source

Add this function and trigger it on any button click :

function closeAll()
    // obj will be your div(wrapper) within your all accordion is exist;
    var item2 = $(".u-vmenu").find("ul").parent("li").children("a");
    item2.attr("data-option", "off");

        $(this).attr("data-option", "off");

This function will close all the opened accordion.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download