Toggle visibility of sibling element jquery

问题

I have several divs on a page. Each div has a heading which I can click to toggle visibility of the corresponding div. The divs are set to display:none by default.

I have used #ids in the click functions of each of the divs , however since I have several divs on the same page. I would want to use a single .class so that I have a single class thus a single function that controls the visibility.

I am guessing i would then need to use .parent and .sibling classes to do this.

Below is an excerpt from my code: HTML:

<div> 
    <legend>
        <a id="show_table" class="show_table" href="#">
            <span id="plus_minus"></span>Div
        </a>
    </legend>
    <div class="toshow" id="toshow">Div to be shown</div>
</div>

JS:

$('#show_table').click(function(){
    $("#toshow").slideToggle(); 
})

I would think to make this more efficient, so that I don't have to do this for every div using the #ids I would want to know how to use a single .class , probably parent and siblings of it to make this.

As an addition, I would like to have a minus/plus sign toggle functionality on the plus_minus span. I had the same working using the individual ids . How would I be able to achieve this using a single .class. I attempted this using below:

$('.div_show').click( function(){

$(this).parent().next().slideToggle();

if($(this).parent().next().is(':visible'){

$(this).closest('span').find('plus_minus').text('+');

}

else {

$(this).closest('span').find('plus_minus').text('-');

}


 });

However it seems not to work.

Suggestions on how to achieve this +/- toggle functionality appreciated.

回答1:

Why not try this

$('.show_table').click(function(){

    $(this).parent().next().slideToggle();

})

UPDATED CODE

Because you are using SlideToggle the changes to the DOM is not readily updated.. So you have to handle the visibility issues in the callback function of it..

Try this code

$('.show_table').click(function(){
      var $elem = $(this);
      $(this).parent().next().slideToggle('slow', function() {
          if($(this).is(':visible')){
             $elem.find('span').html('+');
          }
          else{
             $elem.find('span').html('-');
          }              
      });
})

UPDATED FIDDLE

回答2:

$('#show_table').click(function(){
    $(this).parent().parent().find("div.toshow").slideToggle();
});

回答3:

You can use .parent() to get the legend element, and .next() to get the following sibling (which is your div):

$(".show_table").click(function () {
    $(this).parent().next().slideToggle();
});

If your markup is likely to change in structure, you could make this a little more flexible by using .closest() instead of .parent(), and then using .find():

$(".show_table").click(function () {
    $(this).closest("div").find(".toshow").slideToggle();
});

Here's a working example.

回答4:

You can try this

$('.show_table').on('click', function(){
   $(this).closest('div').find(".toshow").slideToggle();

}) ;

or you can place a class on your container div for title and div like

<div class='container'> 
  <legend>
     <a id="show_table" class="show_table" href="#">
       <span id="plus_minus"></span>Div
     </a>
   </legend>

   <div class = "toshow" id = "toshow" >Div to be shown</div>

 </div>

Then you can try this

$('.show_table').on('click', function(){
   $(this).closest('.container').find(".toshow").slideToggle();

}) ;

回答5:

You can try this:

$('.show_table').each(function(){
    $(this).parent().parent().find('.my-toggle-class').slideToggle(); 
});

来源：https://stackoverflow.com/questions/12578173/toggle-visibility-of-sibling-element-jquery

标签

jquery

html

toggle