CODEWITHSUNDEEP
jquery
Die 20
Die 20

Reputation: 261

show/hide div using jquery with multiple independent divs

I have a series of multiple independent divs that need to be shown/hidden via a trigger. So far, the jquery code I have will show the div clicked, but the hide part wont work.

Here is my jQuery:

$(".show_options_div").click(function() { 
  $(this).next(".toggleOptions").slideToggle("normal");         
  $(this).slideToggle("fast");  
});

$(".hide_options_div").click(function() {
  $(this).prev(".toggleOptions").slideToggle("normal");         
  $(this).prev(".show_options_div").slideToggle("fast");    
});

here is the HTML:

<a class="show_options_div" style="display:block;">
    <div class="drop_down_arrow"></div>
</a>

<div class="toggleOptions" style="display: none">    
  <a class="hide_options_div">
    <div class="drop_up_arrow"></div>
  </a>
</div>

<a class="show_options_div" style="display:block;">
    <div class="drop_down_arrow"></div>
</a>

<div class="toggleOptions" style="display: none">
  <a class="hide_options_div">
    <div class="drop_up_arrow"></div>
  </a>
</div>


<a class="show_options_div" style="display:block;">
    <div class="drop_down_arrow"></div>
</a>

<div class="toggleOptions" style="display: none">
  <a class="hide_options_div">
    <div class="drop_up_arrow"></div>
  </a>
</div>

Upvotes: 1

Views: 944

Answers (1)

OJay
OJay

Reputation: 4921

In your hide function

$(this).prev(".show_options_div").slideToggle("fast");

the prev method only finds the immediate previous element, since this is not .show_options_div, this is not finding anything

.show_options_div is the prev element of .toggleOptions so changing to 

$(this).parent(".toggleOptions").prev(".show_options_div").slideToggle("fast");

and the 

$(this).prev(".toggleOptions").slideToggle("normal");

should be changed to 

$(this).parent(".toggleOptions").slideToggle("normal");

for reference

jQuery prev()

Upvotes: 2

Related Questions