CODEWITHSUNDEEP
javascriptjquerytoggle
alexkodr
alexkodr

Reputation: 543

Adding active class to multiple toggle class

I have a multiple toggle reveal class across 6 divs, which works great. I'd like to expand upon it by adding class active to currently selected p.route-link and also allow unselecting of all .route divs. At the minute, once you click on a p.route-link there is no way to un-toggle .route divs (there is always one visible). The active class toggle I'm currently using is not correct. Here's my HTML

<p class="route-link" divId="route1">Route 1</p>
<p class="route-link" divId="route2">Route 2</p>
<p class="route-link" divId="route3">Route 3</p>
<p class="route-link" divId="route4">Route 4</p>
<p class="route-link" divId="route5">Route 5</p>
<p class="route-link" divId="route6">Route 6</p>

<div class="route" id="route1">route1</div>
<div class="route" id="route2">route2</div>
<div class="route" id="route3">route3</div>
<div class="route" id="route4">route4</div>
<div class="route" id="route5">route5</div>
<div class="route" id="route6">route6</div>

and my jQuery

$(".route-link").bind("click", function() {
   $(".route").hide();
   var divId= $(this).attr("divId");
   $("#" + divId).show();
   $('p').toggleClass('active');
});

Working fiddle: http://jsfiddle.net/alexgomy/26ced1rn/3/

Thanks

Upvotes: 2

Views: 2363

Answers (3)

Death-is-the-real-truth
Death-is-the-real-truth

Reputation: 72299

You need to change jQuery code like below:-

$(".route-link").on("click", function() {
    $(".route").hide();
    var divId= $(this).attr("divId");
    $("#" + divId).show();
    $(".route-link").removeClass('active'); //first remove active class from previous elements
    $(this).addClass('active'); //add active class to the current clicked-one
});

Working fiddle:- http://jsfiddle.net/nvymhmkh/

Upvotes: 3

Yahya Mukhtar
Yahya Mukhtar

Reputation: 474

add this line of code under on click function

$(".route-link").bind("click", function() {
$(this).addClass('active');

});

Upvotes: 2

Shankar
Shankar

Reputation: 3088

you need to remove class active from all p tags and then add that class to the p tag which is currently clicked

$('p').removeClass('active');
$(this).toggleClass('active');


$(".route-link").bind("click", function() {
    $(".route").hide();
    var divId= $(this).attr("divId");
    $("#" + divId).show();
    $('p').removeClass('active');
    $(this).toggleClass('active');
});
p{cursor:pointer;}
p:hover, p.active{color:#999;}
.route{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="route-link" divId="route1">Route 1</p>
<p class="route-link" divId="route2">Route 2</p>
<p class="route-link" divId="route3">Route 3</p>
<p class="route-link" divId="route4">Route 4</p>
<p class="route-link" divId="route5">Route 5</p>
<p class="route-link" divId="route6">Route 6</p>


<div class="route" id="route1">
  <img src="http://www.blossomguesthouseedinburgh.co.uk/images/airport_route_map.jpg" />
</div>
<div class="route" id="route2">
<img src="https://i.sstatic.net/ILbab.jpg" />
  </div>
<div class="route" id="route3">
  <img src="https://www.dmxzone.com/downloads/images/Image013_16.png" />
</div>
<div class="route" id="route4">
  <img src="http://www.ultra-fit.me/wp-content/uploads/2012/06/route-map-overview2.png" />
</div>
<div class="route" id="route5">
  <img src="https://i.sstatic.net/iHy7T.jpg" />
</div>
<div class="route" id="route6">
  <img src="https://www.routeconverter.com/images/routeconverter_route_on_map.png" />
</div>

Upvotes: 3

Related Questions