Question

In the below code, i am able to get the relevant content on clicking the header. But the problem is, on page load i am seeing all the headers and contents, only after clicking any header, the other contents are disappearing. That should not be the case.

On page load i should see only the Headers…How ?

<span>Click a Header!</span>
<div><h2>Sub Header 1</h2></div><div>Content 1</div>
<div><h2>Sub Header 2</h2></div><div>Content 2</div>
<div><h2>Sub Header 3</h2></div><div>Content 3</div>

<script language="javascript">

      $("h2").click(function () 
      {
          $("h2").not(this).parent().next().hide();
          $(this).parent().next().show();
      }); 
</script>

Answer 1

You have to hide the content in the page load.Try with this following. It may be useful to you

$(document).ready(function(){
 $("h2").parent().next().hide();  
});
$("h2").click(function (){
 $("h2").not(this).parent().next().hide();
 $(this).parent().next().show();
 });