how do make this show/hide more concise?

There are many show/hide questions and examples but I can't find the answer.

I have a simple code like this which is used in a few areas within a page.

jQuery(document).ready(function () {
    jQuery('#mini-cart').hide(); 
    jQuery('#mini-cart-a').click(function ()  { 
        jQuery('#mini-cart').toggle(400);  
        return false; 
    }); 
});

Each show/hide uses its own ID, so I simply group ids like so:

jQuery('#show-hide1, #show-hide2').hide();

Problem with this method is, when I click on of the show/hid element, all of the elements show.

So I tried something like this but only the first ones works, the second ones isn't working, when I click on it, it does nothing.

jQuery(document).ready(function () {
    jQuery('show-hide1, #show-hide2').hide();
    jQuery('show-hide1 a, #show-hide2 a').click(function () {
   开发者_如何学Go     jQuery(this).next().toogle(400);
    }
    return false;
    });
});

There are 4 different areas that I need the show/hide within a page and really don't want to repeat the same codes 4 times. Thanks!

Update: (Sorry I can't use the Add Comment nor answer my question)

Thank you all, for your helpful reply.

Lee's version is more like a tabs - I don't want the hidden div associate an ID to anchor tag. It's CMS enviornment so I try to make it simpler if possible.

Andy's version has similar ID issue, so I opted in for roXon's

RoXon: http://jsbin.com/ihoqi3/2/ Click on View Bag (2), you can see it's working, however if you go to Questions' tab, click on "Ask a question", it opens up the hidden container from View Bag.

Jeremy B's version: http://jsbin.com/ibayu4 It hides the toggleLink's text.

From the example page, the "Choose your tea" and "Write a Review" in the Reviews Tab require similar treatment, but if I can get the above mentioned two working, the rest will take care by itself :)

Right now I use 4 separate codes to make it work.

p/s, I need to use the herf anchor because this is important for keyboard user, with the JS show/hide the hidden div can't be toggled.

---

Made a little example of how you could do it: http://jsfiddle.net/ytx2J/

HTML:

<a href="#" class="toggleLink" data-id="1">1</a> 
<a href="#" class="toggleLink" data-id="2">2</a> 
<a href="#" class="toggleLink" data-id="3">3</a>
<a href="#" class="toggleLink" data-id="4">4</a>

<div id="show-hide1">div 1</div>
<div id="show-hide2">div 2</div>
<div id="show-hide3">div 3</div>
<div id="show-hide4">div 4</div>

JS:

$(function(){
    $('.toggleLink').click(function(ev){
       $('#show-hide'+$(this).data('id')).toggle(400); 
       ev.preventDefault();
    });
});

---

Specify a class such as ".tab" and the id of the div containing the content that you want to display for the particular ".tab" i.e.

$(".tab").click(function(){
   var clickedID = $(this).attr("class").split(" ")[1];
   $("#" + clickedID).toggle();
});

<div class="tab container1"></div>
<div id="container1">This container will be displayed if you click on the div .tab container 1</div>

<div class="tab container2"></div>
<div id="container2">This container will be displayed if you click on the div .tab container 2</div>

---

start by giving each of the areas the same class.

jQuery('.hider').click(function() {
    jQuery(this).toggle(400);
    return false;
});

This will cause only the "hider" you clicked on to toggle. Each one will work independently.

---

Like Andy's but slightly different, to allow a different structure of ID's

HTML

<a href="#div1" class="toggleLink">1</a> 
<a href="#div2" class="toggleLink">2</a> 
<a href="#div3" class="toggleLink">3</a>
<a href="#div4" class="toggleLink">4</a>

<div id="div1">div 1</div>
<div id="div2">div 2</div>
<div id="div3">div 3</div>
<div id="div4">div 4</div>

JS

$(function(){
    $('.toggleLink').click(function(ev){
       $($(this).attr('href')).toggle(400); 
       ev.preventDefault();
    });
});

Example at JSFiddle

---

Like Andy's but slightly different, to allow remove ID's as not necessary.
We can keep it simple right?

jsFiddle demo

<a href="#" class="toggleLink">1</a>
<a href="#" class="toggleLink">2</a>
<a href="#" class="toggleLink">3</a>
<a href="#" class="toggleLink">4</a>

<div class="show-hide">div 1</div>
<div class="show-hide">div 2</div>
<div class="show-hide">div 3</div>
<div class="show-hide">div 4</div>

$('.toggleLink').click(function(){
    $('.show-hide:eq('+ $(this).index() +')').toggle(400);
});

It's a nice combination on pointing an index anchor to a :eq() element --> as both '0' based.