CODEWITHSUNDEEP
javascriptjqueryhtml
elkloso
elkloso

Reputation: 27

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 <u> and <li> tags.

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,
      item;
    var options = $.extend({
        Speed: 220,
        autostart: true,
        autohide: 1
      },
      option);
    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") {
        a.parent("li").children("ul").slideDown(options.Speed,
          function() {
            a.attr("data-option", "on");
          });
      }
      if (a.attr("data-option") == "on") {
        a.attr("data-option", "off");
        a.parent("li").children("ul").slideUp(options.Speed)
      }
    });
    if (options.autostart) {
      obj.find("a").each(function() {

        $(this).parent("li").parent("ul").slideDown(options.Speed,
          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.

Upvotes: 1

Views: 92

Answers (1)

Vivek Doshi
Vivek Doshi

Reputation: 58603

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

    item2.each(function(){
        $(this).attr("data-option", "off");
        $(this).parent("li").children("ul").slideUp(200);
    }); 
}

This function will close all the opened accordion.

Upvotes: 1

Related Questions