adding buttons to slidedown tab using jquery
<p>HTML</p>

<pre><code>&lt;div class="sign-up-wrapper"&gt;

&lt;div class="sign-up-container"&gt;
&lt;div id="sign-up-myButton" class="sign-up-header"&gt;&lt;/div&gt;
&lt;div id="sign-up-content" class="hide-content"&gt;content here content here content here content here content here content here content here content here content here content here content here&lt;/div&gt;
&lt;/div&gt;
&lt;div id="sign-up-myButton3" class="sign-up-footer"&gt;Button 1&lt;/div&gt;

&lt;/div&gt;
</code></pre>

<p>CSS</p>

<pre><code>body {padding:0;margin:0;}

.sign-up-wrapper {border:1px solid red;width:459px;line-height:normal;font-size:18px;z-index:110;position:absolute;left:0;top:0;}
.sign-up-container {}
.sign-up-header {height:8px;}
.hide-content {position: absolute !important;top: -9999px !important;left: -9999px !important;}

.sign-up-footer {text-align:center;width:99px;height:23px;cursor:pointer;background:#999;margin-left:19px;}


#sign-up-content {background:#096;width:420px;margin:auto;}
</code></pre>

<p>jQuery</p>

<pre><code>var $button = jQuery('#sign-up-myButton3'),
  $text   = jQuery('#sign-up-content'),
  visible = false;

$button.click(function(){
if ( visible ) {
  $text.slideUp('fast',function(){
    $text.addClass('hide-content')
         .slideDown(0);
  });
} else {
  $text.slideUp(0,function(){
    $text.removeClass('hide-content')
         .slideDown('fast');
  });
}
visible = ! visible;
});
</code></pre>

<p>can please help me, how can I add 2 or 3 buttons beside button 1 with different contents in every button when pressed</p>

<p>I only got 1 button with content, here is My fiddle <a href="http://jsfiddle.net/gbFKe/" rel="nofollow">http://jsfiddle.net/gbFKe/</a></p>
