Home/ Questions/Q 8558939
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T15:55:32+00:00

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

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0