title: jquery buttons - hidden divs get refreshed or loaded once they are shown
body: <p>I have a series of buttons which show and hide divs. I would like to only load the data from the hidden div once the button is pressed. So basically all hidden divs would get refreshed or loaded once they are shown.</p>
  
  <p>Does anybody know how to do this?</p>
  
  <pre><code>&lt;button class="menubutton" id="1"&gt;1&lt;/button&gt;
  &lt;button class="menubutton" id="2"&gt;2&lt;/button&gt;
  &lt;button class="menubutton" id="3"&gt;3&lt;/button&gt;
  &lt;button class="menubutton" id="4"&gt;4&lt;/button&gt;
  
  
  &lt;div id="1" style="display:none;"&gt;
  DATA
  &lt;/div&gt;
  
  &lt;div id="2" style="display:none;"&gt;
  DATA
  &lt;/div&gt;
  
  &lt;div id="3" style="display:none;"&gt;
  DATA
  &lt;/div&gt;
  
  &lt;div id="4" style="display:none;"&gt;
  DATA
  &lt;/div&gt;
  
  $("#1").button().click(function() {
  $('#1').show();
  $('#2').hide();
  $('#3').hide();
  $('#4').hide();
  });
  
  etc
  </code></pre>