Geek Answers Handbook

Show current clicked div hide previous click div

The code below works, but I don’t understand the problem. When I click on the first navigation link, it shows a div, this is what I want, but when I click on another navigation link, it shows the next div as expected but I need the previous divs to hide. any help is appreciated.

something like: if this is not a navigation link that the hide button was clicked on. I would think.

$(document).ready(function(){ $('#navigation a').click(function (selected) { var getName = $(this).attr("id"); var projectImages = $(this).attr("name"); //console.log(getName); //console.log(projectImages); $(function() { $("#" + projectImages ).show("normal"); }); }); });
+2
source share
5 answers

You can try adding a class to the div you are showing, and then hide elements with that class when showing new div (s). Something like that:

 $(document).ready(function(){ $('#navigation a').click(function (selected) { var getName = $(this).attr("id"); var projectImages = $(this).attr("name"); $(function() { $(".current").hide().removeClass("current"); $("#" + projectImages ).show("normal").addClass("current"); }); }); });
+2
source

I would usually achieve this functionality by assigning a <div> class that wraps all the images that should be hidden. Then, each time you click, hide the corresponding div and show what you need:

 $(document).ready(function(){ $('#navigation a').click(function (selected) { var getName = $(this).attr("id"); var projectImages = $(this).attr("name"); $('div.special_images').hide(); $("#" + projectImages ).show("normal"); }); });

In addition, you do not need to wrap the projectImages project code:

 $(function() { ... });

This is the shortcut for the code you have above:

 $(document).ready(function() {...});

which already completes all the code.

0
source

I guess your markup:

 <ul id='navigation'> <li><a href='#' id='nav1' name='nav1menu'>Link 1</a><ul id='nav1menu'>...</ul></li> <li><a href='#' id='nav2' name='nav2menu'>Link 2</a><ul id='nav2menu'>...</ul></li> <li><a href='#' id='nav3' name='nav3menu'>Link 3</a><ul id='nav3menu'>...</ul></li> </ul>

Your question asks for the “last” click, but the end of the question seems to imply that all other menus should be closed. In this case:

 $(document).ready(function(){ $('#navigation a').click(function (selected) { var getName = $(this).attr("id"); var projectImages = $(this).attr("name"); //console.log(getName); //console.log(projectImages); $(function() { $('#navigation ul').hide(); $("#" + projectImages ).show("normal"); }); }); });

Please note that we close all UL until it clicks.

Hope this helps, Joe

0
source

I assume these divs are not part of the navigation. Make sure that the latter opens and hides it before showing the next one.

 var = previousProjectImage = ""; $(document).ready(function(){ $('#navigation a').click(function (selected) { var getName = $(this).attr("id"); var projectImages = $(this).attr("name"); //console.log(getName); //console.log(projectImages); $(function() { if(previousProjectImage != "") { $("#" + previousProjectImage).hide(); } $("#" + projectImages ).show("normal"); previousProjectImage = projectImages; }); }); });
0
source

If the elements you hide / show are siblings inside any element, this will work:

 $(function(){ $('#navigation a').click(function () { $("#" + $(this).attr("name")).siblings().hide().end().show("normal"); }); });
0
source

More articles:


All Articles