Show Only One Element with JQuery

Question

I need to show only one element at a time when a link is clicked on. Right now i'm cheating by hiding everything again and then toggling the element clicked on. This works, unless i want EVERYTHING to disappear again. Short of adding a "Hide All" button/link what can i do? I would like to be able to click on the link again, and hide it's content.

EDIT: Pseudo's code would have worked, but the html here mistakenly led you to believe that all the links were in one div. instead of tracking down where they all were, it is easier to call them by their ID.

Here's what i have so far:

  $(document).ready(function(){
    //hides everything
    $("#infocontent *").hide();

    //now we show them by which they click on
    $("#linkjoedhit").click(function(event){
      $("#infocontent *").hide();
      $("#infojoedhit").toggle();
      return false;
    });

    $("#linkgarykhit").click(function(event){
       $("#infocontent *").hide();
      $("#infogarykhit").toggle();
      return false;
    });

});

and the html looks like:

<div id="theircrappycode">
<a id="linkjoedhit" href="">Joe D</a><br/>
<a id="linkgarykhit" href="">Gary K</a>
</div>

<div id="infocontent">
    <p id="infojoedhit">Information about Joe D Hitting.</p>
    <p id="infogarykhit">Information about Gary K Hitting.</p>
</div

there are about 20 links like this. Because i am not coding the actual html, i have no control over the actual layout, which is horrendous. Suffice to say, this is the only way to organize the links/info.

Answer 1

$("#linkgarykhit").click(function(){
       if($("#infogarykhit").css('display') != 'none'){
          $("#infogarykhit").hide();
       }else{
          $("#infocontent *").hide();
          $("#infogarykhit").show();
       }
       return false;
});

---

We could also DRY this up a bit:

function toggleInfoContent(id){
   if($('#' + id).css('display') != 'none'){
      $('#' + id).hide();
   }else{
      $("#infocontent *").hide();
      $('#' + id).show();
   }
}

$("#linkgarykhit").click(function(){
    toggleInfoContent('infogarykhit');
    return false;
});

$("#linkbobkhit").click(function(){
    toggleInfoContent('infobobkhit');
    return false;
});

Answer 2

I just started with JQuery, so I don't know if this is dumb or not.

function DoToggleMagic(strParagraphID) {
    strDisplayed = $(strParagraphID).css("display");
    $("#infocontent *").hide();
    if (strDisplayed == "none") {$(strParagraphID).toggle();}
    }
$(document).ready(function(){
    //hides everything
    $("#infocontent *").hide();

    //now we show them by which they click on
    $("#linkjoedhit").click(function(event){
     DoToggleMagic("#infojoedhit");
     return false;
    });

    $("#linkgarykhit").click(function(event){
     DoToggleMagic("#infogarykhit");
     return false;
    });   
});

Answer 3

If your markup "naming scheme" is accurate, you can avoid a lot of repetitious code by using a RegEx for your selector, and judicious use of JQuery's "not".

You can attach a click event one time to a JQuery collection that should do what you want so you don't need to add any JS as you add more Jim's or John's, as so:

$(document).ready( function () {

    $("#infocontent *").hide();

    $("div#theircrappycode > a").click(function(event){
        var toggleId = "#" + this.id.replace(/^link/,"info");
        $("#infocontent *").not(toggleId).hide();
        $(toggleId).toggle();
        return false;
    });

});

...and you're good.

Answer 4

Here is a slightly different approach there are some similarities to Pseudo Masochist's code.

$(document).ready(function(){
   $("#infocontent *").hide();
   $("#theircrappycode > a").click(statlink.togvis);
});
var statlink = {
   visId: "",
   togvis: function(){
    $("#" + statlink.visId).toggle();
    statlink.visId = $(this).attr("id").replace(/link/, "info");
    $("#" + statlink.visId).toggle();
   }
};

Hope you find this useful also.