title: How to hide / show everything inside of a div using jquery and an HTML button?
body: <p>How do I use an HTML button to hide a div and all of its contents within it using jquery.</p>
  
  <p><strong>(Be aware of the divs contents and the way they are set up are completely necessary)</strong></p>
  
  <p>The button:</p>
  
  <pre><code>&lt;input id="button" type="button" value="Toggle" /&gt;
  </code></pre>
  
  <p>The div:</p>
  
  <pre><code>&lt;div class="holder"&gt;
      &lt;iframe class="frame"
              src="http://www.google.com/custom"
              data-url="http://www.google.com/custom?q="
              width="250"
              height="600" 
              onmouseover="width = 400" 
              onmouseout="width = 250"&gt;
      &lt;/iframe&gt;
      &lt;div class="sampleDiv"&gt;
          &lt;a class="invisibleDiv" 
             id="http://www.google.com/custom?q=" 
             href="http://www.google.com/custom?q=" 
             target="Goog"&gt;&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The Javascript:</p>
  
  <pre><code> function virtualSubmit(form) {
          var text = form.searchtext.value;
          var targets = document.getElementsByTagName('iframe'), items = targets.length;
          var targets2 = document.getElementsByClassName('invisibleDiv'), items2 =      targets2.length;
  
   for (var i = 0; i &lt; items; i++) {
          var target = targets[i], url = target.getAttribute('data-url');
          }
  
   for (var i = 0; i &lt; items2; i++) {
          var target = targets2[i], url = target.getAttribute('href');
           target.href = target.id + text;
  
    }
   return false;
  
   $(document).ready(function() {
   $("#button").click(function () {
      var holder= this.value;
        $(".holder").slideToggle().siblings().hide("slow");
      });
  
   });
  </code></pre>
  
  <p>A fiddle example: <a href="http://jsfiddle.net/2xLNd/" rel="nofollow">http://jsfiddle.net/2xLNd/</a></p>