CODEWITHSUNDEEP
jqueryhtmltoggle
watkib
watkib

Reputation: 347

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.

Upvotes: 2

Views: 7382

Answers (5)

Sushanth --
Sushanth --

Reputation: 55740

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

Upvotes: 3

Mihai Matei
Mihai Matei

Reputation: 24276

You can try this: 

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

Upvotes: 1

Dmytro Zarezenko
Dmytro Zarezenko

Reputation: 10686

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

Upvotes: 3

Yograj Gupta
Yograj Gupta

Reputation: 9869

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

}) ;

Upvotes: 1

James Allardice
James Allardice

Reputation: 165971

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.

Upvotes: 2

Related Questions