jquery buttons - hidden divs get refreshed or loaded once they are shown
<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>
