CODEWITHSUNDEEP
javascriptjqueryhtmlcss
GoldenGonaz
GoldenGonaz

Reputation: 1166

removeClass() when div is closed

I am having trouble with removing a class from an element when a separate div is closed.

You can see from my code below and my Fiddle

I have a jquery tabbed menu going that starts off with nothing open by default. When you click on a tab, the content is opened and the tab is highlighted. However if you click that same tab again and close the content the tab remains highlighted.

I have tried removeClass but with no success.

JS

$(document).ready(function() {
  $(".tabs-menu a").click(function(event) {
    event.preventDefault();
    $(this).parent().addClass("current");
    $(this).parent().siblings().removeClass("current");
    var tab = $(this).attr("href");
    $(".tab-content").not(tab).css("display", "none");
    $(tab).slideToggle();
  });
});

HTML

<div id="tabs-container">
  <div class="tabs-menu">
    <div><a href="#tab-1">One</a></div>
    <div><a href="#tab-2">Two</a></div>
    <div><a href="#tab-3">Three</a></div>
    <div><a href="#tab-4">Four</a></div>
  </div>
  <div class="tab">
    <div id="tab-1" class="tab-content">
      Hello
    </div>
    <div id="tab-2" class="tab-content">
      Number Two
    </div>
    <div id="tab-3" class="tab-content">
      Tab 3
    </div>
    <div id="tab-4" class="tab-content">
      Bye
    </div>
  </div>
</div>

Upvotes: 1

Views: 308

Answers (1)

madalinivascu
madalinivascu

Reputation: 32354

Use the toggleClass function to add/remove the class

 $(this).parent().toggleClass("current");

demo:http://jsfiddle.net/Us8uc/6747/

Upvotes: 5

Related Questions