Show/Hide the Div

Show/Hide the Div

I have a div which is initially hidden. When clicking a certain link; the div will be shown...
The function to reverse the show/hide does not seem to be called.

Here is the intialisation :

  1.         <!-- initially hide div -->
            <script type="text/javascript">
                  $(document).ready(function(){
                    $('#checkbox_grouped_Options').show ();
                    var showtheoptions = true; // set boolean to false
                
                  });
            </script>









 


  1.         <script type="text/javascript">
        
            function showHidetheOptions() {
            
                showtheoptions = !showtheoptions //invert value
                    
                if (!showtheoptions) {
                $('#checkbox_grouped_Options').hide ();
                showtheoptions = false; // set to current state to false
                }
                
                    else {
                    $('#checkbox_grouped_Options').show ();
                    showtheoptions = true; // set to current state to true
                    }
                
            } // end function showHideOptions

           </script>
        





















this is the link that should call the function
  1.  <a href="" title="opts" id="changeOptions" onclick="showHidetheOptions()"  >show Opt</a>