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: /

Thanks

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/alexgomy/26ced1rn/3/

Thanks

• javascript
• jquery
• toggle

• The add / remove class works perfect thanks. I also want to be able to un-toggle by clicking the same .route-link. e.g. i click <p class="route-link" divId="route1">Route 1</p> i want to be able to click again to hide <div class="route" id="route1"></div> same applies to any route. – alexkodr Commented Nov 6, 2017 at 12:20

3 Answers 3

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/nvymhmkh/

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./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/ILbab.jpg" />
  </div>
<div class="route" id="route3">
  <img src="https://www.dmxzone./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/iHy7T.jpg" />
</div>
<div class="route" id="route6">
  <img src="https://www.routeconverter./images/routeconverter_route_on_map.png" />
</div>

add this line of code under on click function

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

});