html5 - Jquery, Toggle two elements with one click, one element should appear and the other should be hidden -

i have 2 divs , button. want 1 div visible on click has display property none, , other div hidden.

and should toggle. on next click. second element should visible , first should hidden.

i have no knowledge of jquery.

how achieve ??

i've been trying this...

<script>       $(document).ready(function(){           $("#filter").click(function(){              $("#sidebar").toggle(function(){                  $("#sidebar").hide();                  $(".right-box").show();              }, function(){                  $("#sidebar").show();                  $(".right-box").hide();              });          });      }); </script> 

it doesn't work fine. div's appear , disappear in flash

hope helpful you.

html :

 <div id='content'>hello world</div>    <input type='button' id='hideshow' value='hide/show'> 

jquery :

jquery(document).ready(function(){ jquery('#hideshow').live('click', function(event) {              jquery('#content').toggle('show'); });  }); 

demo