show current clicked div hide previous clicked div

Question

Hi All, The code below is working, but with a problem I do not understand. When I click on first navigation link it is showing the div, this is what I want, but when I click on another nav link it does show the next div as expected but I need for the previous div(s) to hide. any help is appreciated.

something like: if this is not the nav link that was clicked hide. 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");
    });
  });
});

Answer 1

I would generally achieve this functionality by assigning a class to a <div> that wraps all of the images that need to be hidden. Then, upon every click, hide the appropriate 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");
  });
});

Also, you shouldn't need to wrap your projectImages show code with:

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

It is a shortcut for the code you have above:

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

which already wraps the entirety of your code.

Answer 2

I'm guessing at 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 about the "last" click, but the end of the question seems to imply that all other menus should be closed. In that 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");
    });
  });
});

Notice that we hide all ULs before we click.

Hope that helps, Joe

Answer 3

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

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

Answer 4

I'm guessing these divs aren't part of the navigation. Keep track of the last one opened and hide it before showing the next.

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

}); });

Answer 5

If the elements you're hiding/showing are siblings inside any element, this will work:

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