Geek asks and answers

How to make this show / hide more concise?

There are many questions and examples to show / hide, but I can not find the answer.

I have such simple code that is used in several areas on 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 identifier, so I just group the identifiers like:

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

The problem with this method is that when I click on the show / hid element, all the elements are displayed.

So, I tried something like this, but only the first work, and the second does not work, 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 () {
        jQuery(this).next().toogle(400);
    }
    return false;
    });
});

There are 4 different areas that I need to show / hide inside the page and really do not want to repeat the same codes 4 times. Thank!

Update: (Sorry, I cannot use Comment and do not answer my question)

, .

- , div . CMS enviornment, , .

Andy , roXon

Roxon: http://jsbin.com/ihoqi3/2/ " " (2), , , "", " ", " ".

: http://jsbin.com/ibayu4 toggleLink.

" " " " "" , , :)

4 , .

p/s, anchor anchor, , JS show/hide div .

+3
5

, ".tab", div, , ".tab", .

$(".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>
0

, : 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();
    });
});
+1

.

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

"hider", . .

0

, ,

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

JSFiddle example

0
source

Like Andy, but a little different to allow ID removal as not necessary.
Can we save it 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);
});

This is a good combination when specifying indexan element binding :eq()→ as based on "0".

0
source

More articles:


All Articles