addClass/removeClass and toggle

Question

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();
    }
  });

});

Rajaprabhu Aravindasamy · Accepted Answer · 2016-04-15 07:22:34Z

1

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

answered Apr 15, 2016 at 7:22

Rajaprabhu Aravindasamy

67.2k17 gold badges107 silver badges133 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rino Raj · Accepted Answer · 2016-04-15 07:26:25Z

1

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

edited Apr 15, 2016 at 7:26

answered Apr 15, 2016 at 7:20

Rino Raj

6,2622 gold badges29 silver badges44 bronze badges

Comments

Bhushan Kawadkar · Accepted Answer · 2016-04-15 07:27:04Z

0

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

edited Apr 15, 2016 at 7:27

answered Apr 15, 2016 at 7:21

Bhushan Kawadkar

28.6k5 gold badges39 silver badges61 bronze badges

2 Comments

Rajaprabhu Aravindasamy Over a year ago

Continuously clicking on map/title tab would toggle the menu selection automatically.

Bhushan Kawadkar Over a year ago

@RajaprabhuAravindasamy, yeah I missed that , thanks. I have updated my asnwer.

Collectives™ on Stack Overflow

addClass/removeClass and toggle

3 Answers 3

DEMO

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related