How to implement show/hide functionality for <div> tag using jquery?

Use the following code to implement show/hide functionality for div tag using jquery.

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#button').hide();
$('#hide').hide();
 
});

function hide()
  {
          $('#button').toggle();
          $('#show').hide();
          $('#hide').show();
  }
  function show()
  {
          $('#button').toggle();
          $('#show').show();
          $('#hide').hide();
  }
 
</script>
</head>

<body>
<div >
Div Fragment
<a id="show" href="javascript:hide()" width="16" height="16">show</a>
                                       
                <a id="hide"                                     href="javascript:show()" width="16" height="16">hide</a>
                        </div>
<div id="button"><button>clickme</button></div>
</body>
</html>

 

Search