javascript - Showing and hiding text in response to a button click -

the code below this. when click button first time, shows respective text. , when click same button again, fades out , fades in. however, want respective text disappear if button clicked second time instead of fading out , fading in.

$(document).ready(function(){     $('.info').click(function(){         $(this).next().fadeout("slow");     $(this).next().fadein("slow");     }); }); 

html:

    <div>         <a class="info" p style="font-size:30px" href="javascript:void(0);">header 1</a>         <h1 class="infotext" style="display:none">text 1</h1>     </div>     <div>         <a class="info" href="javascript:void(0);">header 2</a>         <h1 class="infotext" style="display:none">text 2</h1>     </div>     <div>         <a class="info" href="javascript:void(0);">header 3</a>         <h1 class="infotext" style="display:none">text 3</h1>     </div> 

it should start this:

header1

header2

header3

when click header1, should this:

header1

text1

header2

header3

and when click header 1 again, should this:

header1

header2

header3

anybody know how this?

you can use fadetoggle() toggle display fade effect

$(document).ready(function() {    $('.info').click(function() {      $(this).next().fadetoggle("slow");    });  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>    <div>    <a class="info" p style="font-size:30px" href="javascript:void(0);">header 1</a>    <h1 class="infotext" style="display:none">text 1</h1>  </div>  <div>    <a class="info" href="javascript:void(0);">header 2</a>    <h1 class="infotext" style="display:none">text 2</h1>  </div>  <div>    <a class="info" href="javascript:void(0);">header 3</a>    <h1 class="infotext" style="display:none">text 3</h1>  </div>