CODEWITHSUNDEEP
jquery
Adam Pavlov
Adam Pavlov

Reputation: 307

addClass/removeClass and toggle

I have written toggle code below, I need "active" class should toggle when "Map / View" toggle. When I click on another link first should remove and apply to clicked link.

Check Here

HTML:

<div class="member-view-switch">
  <a href="#" class="toggle-button active">Tile</a>
  <a href="#" class="toggle-button">Map</a>
</div>

<div class="toggle-item target-tile-view">
  Tile View
</div>

<div class="toggle-item target-map-view">
  Map View
</div>

CSS:

.member-view-switch {
  margin-bottom: 20px;
}

a,
:hover,
:focus {
  color;
  #333333;
  text-decoration: none;
  padding-right: 15px;
}

.active {
  color: blue;
  font-weight: bold;
}

.toggle-item {
  border: 1px solid #333;
  padding: 20px;
  margin-bottom: 20px;
}

jQuery:

$(document).ready(function() {

  $(".target-map-view").css("display", "none");
  $(".toggle-button").click(function() {
    if ($(this).hasClass("active")) {
      $(".target-tile-view").show();
      $(".target-map-view").hide();
    } else {
      $(".target-tile-view").hide();
      $(".target-map-view").show();
    }
  });

});

Upvotes: 0

Views: 1007

Answers (3)

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

Try this : As you initially hiding map view button and div, you can easily use toggle() to show / hide map and tile view. And use toggleClass("active") to add remove active class.

And to avoid malfunctioning when user clicks same button continuosly, we can check if the clicked button was previously clicked or not.

$(document).ready(function() {
  var $clickedButton =  $(".toggle-button.active");
  $(".target-map-view").css("display", "none");
  $(".toggle-button").click(function() {
       //if previously clicked then return and do nothing
      if($clickedButton.is($(this)))
         return true;

      $clickedButton = $(this);
      $(".toggle-button").toggleClass("active");
      $(".target-tile-view").toggle();
      $(".target-map-view").toggle();

  });

});

JSFiddle Demo

Upvotes: 0

Rino Raj
Rino Raj

Reputation: 6264

Solution

While clicking Title or Map you have to remove the class active from the navigation and ad that to current element.$(this) is used to get the current element.

$(".toggle-button").removeClass("active")
$(this).addClass("active")

$(document).ready(function() {

  $(".target-map-view").css("display", "none");
  $(".toggle-button").click(function() {
    $(".toggle-button").removeClass("active")    // Newly added
    $(this).addClass("active")     // Newly added
    if ($(this).hasClass("active")) {
      $(".target-tile-view").show();
      $(".target-map-view").hide();
    } else {
      $(".target-tile-view").hide();
      $(".target-map-view").show();
    }
  });

});

Working Demo

Upvotes: 1

Rajaprabhu Aravindasamy
Rajaprabhu Aravindasamy

Reputation: 67187

Just rewrite your code like below,

$(document).ready(function() {
  var items = $(".toggle-item");
  items.filter(".target-map-view").hide();
  var buttons = $(".toggle-button").click(function() {
    buttons.removeClass("active").filter(this).addClass("active");
    items.hide().eq($(this).index()).show();
  });
});

This code will work for any number of tabs and contents.

DEMO

Upvotes: 1

Related Questions