CODEWITHSUNDEEP
jquerytabstoggle
sarah3585
sarah3585

Reputation: 637

Responsive Tabs to accordion - Toggle close on accordion

I am using the below code which is a responsive tabs to accordion script.

In addition I would like to be able to click the 'tab_drawer_heading' to close the current accordion item if open (toggle). Currently it stays open until another is clicked.

JSFiddle: https://jsfiddle.net/d02Lu45y/1/

// tabbed content
$(".tab_content").hide();
$(".tab_content:first").show();

/* if in tab mode */
$("ul.tabs li").click(function() {

  $(".tab_content").hide();
  var activeTab = $(this).attr("rel"); 
  $("#"+activeTab).fadeIn();        

  $("ul.tabs li").removeClass("active");
  $(this).addClass("active");

  $(".tab_drawer_heading").removeClass("d_active");
  $(".tab_drawer_heading[rel^='"+activeTab+"']").addClass("d_active");

});
/* if in drawer mode */
$(".tab_drawer_heading").click(function() {

  $(".tab_content").hide();
  var d_activeTab = $(this).attr("rel"); 
  $("#"+d_activeTab).fadeIn();

  $(".tab_drawer_heading").removeClass("d_active");
  $(this).addClass("d_active");

  $("ul.tabs li").removeClass("active");
  $("ul.tabs li[rel^='"+d_activeTab+"']").addClass("active");
});

Upvotes: 0

Views: 545

Answers (1)

Sunnny
Sunnny

Reputation: 99

Add following condition in your code it will work.

you should check before show the tab is open or not. if not then show other wize close

if(!$(this).hasClass('d_active')){      
          $("#"+d_activeTab).fadeIn();
}

working https://jsfiddle.net/d02Lu45y/3/

Upvotes: 1

Related Questions