CODEWITHSUNDEEP
jqueryhtml
Rahul P
Rahul P

Reputation: 1103

Jquery Hide/Show multiple division by single classname

HTML 

  <p class="heading"></p>
<div id="div1" class="targetDiv">content1</div>
 <p class="heading"></p>
<div id="div2" class="targetDiv">content2</div>
 <p class="heading"></p>
<div id="div3" class="targetDiv">content3</div>
 <p class="heading"></p>
<div id="div4" class="targetDiv">content4</div>


<script type="text/javascript">
    jQuery(document).ready(function() {
              jQuery(".targetDiv").hide();
              //toggle the componenet 
              jQuery(".heading").click(function()
              {
                jQuery(this).next(".targetDiv").slideToggle(500);

              });
            });
    </script>

here i'm able to show one div on clicking heading but when i'm going to open another it must get hidden. Infact while i'm opening one div other must get hidden.

pls help me...

Thanks in advance

Upvotes: 0

Views: 381

Answers (3)

Simon Wang
Simon Wang

Reputation: 2943

Do you mean something like this:

http://jsfiddle.net/Et4gh/1/

Just add the jQuery(".targetDiv").hide(); into the click function too.

Upvotes: 0

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123377

$(".heading").click(function() {                        
    $('.targetDiv:visible').hide();  /* reference to the single previous
                                      *  opened tab and hide it 
                                      */
    $(this).next(".targetDiv").slideToggle(500);
});

Upvotes: 1

RJD22
RJD22

Reputation: 10340

This should do the trick:

<script type="text/javascript">
    jQuery(document).ready(function() {
              jQuery(".targetDiv").hide();
              //toggle the componenet 
              jQuery(".heading").click(function()
              {
                jQuery(".targetDiv").slideUp();
                jQuery(this).next(".targetDiv").slideToggle(500);

              });
            });
</script>

A small explanation: It first hides all divs and then opens one. I should do so fast that you won't be able to see it.

Upvotes: 1

Related Questions