javascript - How to hide one section of the page and show the other section when a heading is clicked? jQuery -

i made example in jsfiddle: http://jsfiddle.net/yt88bsnf/1/

one section has display of none, , other shown. trying accomplish when 1 of h2 element clicked, section below becomes shown (unless shown, stay shown), , other h2 element display changes none (unless has display of none).

any or suggestions appreciated! thanks

html:

<div id="container">     <h2>section one</h2>     <h2>section two</h2> </div>  <div id="section_one">     section 1 </div>  <div id="section_two">     section 2 </div> 

css:

#container{     overflow:hidden; }  #container h2{     float:left;     margin-right:30px;     cursor:pointer; }  #section_two{     display:none; } 

check fiddle

you can use jquery show() , hide(). more information see w3scools

and docs see here

• show()
• hide()

js

$("#header1").click(function () {      $("#section_one").show();     $("#section_two").hide(); }); $("#header2").click(function () {      $("#section_two").show();     $("#section_one").hide();  }); 

html

<div id="container">      <h2 id="header1">section one</h2>       <h2 id="header2">section two</h2>  </div> <div id="section_one">this section one</div> <div id="section_two">this section two</div> 

i've added each h2 id (header1 , header2) , used id show , hide divs respectively..please try it..