jQuery code not working as I want

Question

Sorry about the title I just don't know what to set it as. If you can think of a title for this question please tell me or edit, thanks. Now to the question. I have written some jQuery code which displays different boxes depending on which link is clicked. And when you click the link again all the boxes reappear which is exactly what I want. My problem is that when I click link1 then link2 and then go back to link1 all the images reappear. I don't want this to happen. I only want the boxes for link1 to appear. All the boxes should only show at the start and when you click a link twice.

 $(".links").click(function(){ var current_link = $(this); var images = $(".images") $(images).removeClass('hide'); $(images).removeClass('show'); var current = $(this).data("cat"); $(images).addClass('hide'); $('.'+current).addClass('show'); $(current_link).click(function(){ $(images).toggleClass('hide'); }); }); 

 ul{ list-style-type: none; } ul li{ display: inline-block; } ul li a{ font-size: 20px; padding: 10px; background-color: yellow; } .change{ background-color: red; } .print{ height: 100px; width: 100px; background-color: blue; display: inline-block; } .portfolio{ height: 100px; width: 100px; background-color: red; display: inline-block; } .web{ height: 100px; width: 100px; background-color: orange; display: inline-block; } .hide{ display: none; } .show{ display: inline-block; } 

 <ul> <li><a id="hi" class="links" data-cat="print" href="#">link1</a></li> <li><a class="links" data-cat="portfolio" href="#">link2</a></li> <li><a class="links" data-cat="web" href="#">link3</a></li> </ul> <div class="print images"> </div> <div class="portfolio images"> </div> <div class="web images"> </div> <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script> 

Answer 1

You can add a condition on the links by adding a class .active and check if the link has that class, and use just the class .hide for the .images , no need to use class .show

See code snippet :

 $(".links").click(function() { var current_link = $(this); var images = $(".images"); var links = $(".links"); var current = $(this).data("cat"); if (current_link.hasClass('active')) { links.removeClass('active'); images.removeClass('hide'); } else { links.removeClass('active'); current_link.addClass('active'); images.addClass('hide'); $('.' + current).removeClass('hide'); } }); 

 ul { list-style-type: none; } ul li, .images { display: inline-block; } ul li a { font-size: 20px; padding: 10px; background-color: yellow; } .change { background-color: red; } .images { height: 100px; width: 100px; } .print { background-color: blue; } .portfolio { background-color: red; } .web { background-color: orange; } .hide { display: none; } 

 <ul> <li><a id="hi" class="links" data-cat="print" href="#">link1</a></li> <li><a class="links" data-cat="portfolio" href="#">link2</a></li> <li><a class="links" data-cat="web" href="#">link3</a></li> </ul> <div class="print images"></div> <div class="portfolio images"></div> <div class="web images"></div> <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script> 

Answer 2

You need to maintain the current link in global variable or like I have done it inside the window object, Try this:

 $(".links").click(function(){ var current_link = $(this); var images = $(".images") var current = $(this).data("cat"); if(current == window.currentImage){ $(images).removeClass('hide'); $(images).removeClass('show'); window.currentImage = null; return; // don't do anything id current link is clicked } $(images).addClass('hide'); $('.'+current).removeClass('hide'); $('.'+current).addClass('show'); window.currentImage = current; }); 

 ul{ list-style-type: none; } ul li{ display: inline-block; } ul li a{ font-size: 20px; padding: 10px; background-color: yellow; } .change{ background-color: red; } .print{ height: 100px; width: 100px; background-color: blue; display: inline-block; } .portfolio{ height: 100px; width: 100px; background-color: red; display: inline-block; } .web{ height: 100px; width: 100px; background-color: orange; display: inline-block; } .show{ display: inline-block; } .hide{ display: none; } 

 <ul> <li><a id="hi" class="links" data-cat="print" href="#">link1</a></li> <li><a class="links" data-cat="portfolio" href="#">link2</a></li> <li><a class="links" data-cat="web" href="#">link3</a></li> </ul> <div class="print images"> </div> <div class="portfolio images"> </div> <div class="web images"> </div> <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script> 

Thanks

Answer 3

This could be a cleaner solution for you. i am also using a condition :)

 var current = null; var images = $('.images'); $(".links").click(function(){ if(current === $(this).data("cat")){ images.removeClass('hide'); current = null; } else { current = $(this).data("cat"); $(images).addClass('hide'); $('.'+current).removeClass('hide'); } }); 

 ul{ list-style-type: none; } ul li{ display: inline-block; } ul li a{ font-size: 20px; padding: 10px; background-color: yellow; } .change{ background-color: red; } .print{ height: 100px; width: 100px; background-color: blue; display: inline-block; } .portfolio{ height: 100px; width: 100px; background-color: red; display: inline-block; } .web{ height: 100px; width: 100px; background-color: orange; display: inline-block; } .hide{ display: none; } .show{ display: inline-block; } 

 <ul> <li><a id="hi" class="links" data-cat="print" href="#">link1</a></li> <li><a class="links" data-cat="portfolio" href="#">link2</a></li> <li><a class="links" data-cat="web" href="#">link3</a></li> </ul> <div class="print images"> </div> <div class="portfolio images"> </div> <div class="web images"> </div> <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>