title: how to make a show/hide toggle button with jquery
body: <p>Hi I have been trying to make a show/hide toggle button with jquery but I can only find buttons that show a div but none that hide it </p>
  
  <p>below is one of the examples I found that shows a div but it doesn't let you hide it unless you click on another button. I would like to be able to use the same button to show and hide a div. I have multiple divs on my page and would like to be able to use jquery instead of javascript.</p>
  
  <pre><code>&lt;html&gt;
   &lt;head&gt;
  &lt;script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
  &lt;script&gt;
      $(document).ready(function(){
  
          $(".buttons").click(function () {
          var divname= this.value;
            $("#"+divname).show("slow").siblings().hide("slow");
          });
  
        });
  &lt;/script&gt; 
       &lt;/head&gt;
          &lt;body&gt;
  
  
   &lt;div id="buttonsDiv"&gt; 
  
    &lt;input type="button" id="button1" class="buttons" value="div1"&gt;&lt;/input&gt;
    &lt;input type="button" id="button2" class="buttons" value="div2"&gt;&lt;/input&gt;
    &lt;input type="button" id="button3" class="buttons" value="div3"&gt;&lt;/input&gt;
    &lt;input type="button" id="button4" class="buttons" value="div4"&gt;&lt;/input&gt;
  
    &lt;/div&gt;
  
     &lt;div&gt;
  
       &lt;div id="div1" style="display:none"&gt;
      Hello World
       &lt;/div&gt;
  
       &lt;div id="div2" style="display:none"&gt;
         Test
     &lt;/div&gt;
  
          &lt;div id="div3" style="display:none"&gt;
            Another Test
    &lt;/div&gt;
  
       &lt;div id="div4" style="display:none"&gt;
       Final Test
       &lt;/div&gt;
  
  
           &lt;/div&gt;
  
  
       &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>