jquery - jqueryを使用してスライドダウンタブにボタンを追加する

Question

HTML

<div class="sign-up-wrapper">

<div class="sign-up-container">
<div id="sign-up-myButton" class="sign-up-header"></div>
<div id="sign-up-content" class="hide-content">content here content here content here content here content here content here content here content here content here content here content here</div>
</div>
<div id="sign-up-myButton3" class="sign-up-footer">Button 1</div>

</div>

CSS

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;}

jQuery

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;
});

助けてください、ボタン 1 の横に 2 つまたは 3 つのボタンを追加し、ボタンを押すたびに内容が異なるようにするにはどうすればよいですか

コンテンツのあるボタンは 1 つしかありません。これが私のフィドルですhttp://jsfiddle.net/gbFKe/

Answer 1

これにより、何をすべきかについての基本的な考え方が得られます。

Javascript

$('#content').hide();
$('#content2').hide();
$('#content3').hide();

$('#button1').on('click',function(){
    $('#content').slideDown();
});​​​​​​​​

$('#button2').on('click',function(){
    $('#content2').slideDown();
});   

$('#button3').on('click',function(){
    $('#content3').slideDown();
});

HTML

    <button id='button1'>Button1</button>
    <div id='content'>
        <p>Test</p>
        <button id='button2'>Button1</button>
        <button id='button3'>Button1</button>
        <div id='content2'>
            <p>alsdkfjasdfl</p>
        </div>
        <div id='content3'>
            <p>asdfladsf</p>
        </div>
    </div>

Answer 2

ここのフィルドラーソリューション html

    <div class="sign-up-wrapper">
<div id="sign-up-myButton1" class="sign-up-footer">Button 1</div>
<div id="sign-up-myButton2" class="sign-up-footer">Button 2</div>
<div id="sign-up-myButton3" class="sign-up-footer">Button 3</div>
<div class="sign-up-container">
<div id="sign-up-myButton" class="sign-up-header"></div>
<div id="sign-up-content1" class="hide-content">content here content here content here content here content here content here content here content here content here content here content here</div>
    <div id="sign-up-content2" class="hide-content">button2 content</div>
    <div id="sign-up-content3" class="hide-content">button3content</div>
</div>
</div>​

jquery 、必要に応じてカスタマイズできる冗長コードがあります

    var $button1 = jQuery('#sign-up-myButton1'),
      $text1   = jQuery('#sign-up-content1'),
      visible = false;

    $button1.click(function(){
    if ( visible ) {
      $text1.slideUp('fast',function(){
        $text1.addClass('hide-content')
             .slideDown(0);
      });
    } else {
      $text1.slideUp(0,function(){
        $text1.removeClass('hide-content')
             .slideDown('fast');
      });
    }
    visible = ! visible;
    });
var $button2 = jQuery('#sign-up-myButton2'),
      $text2   = jQuery('#sign-up-content2'),
      visible = false;

    $button2.click(function(){
    if ( visible ) {
      $text2.slideUp('fast',function(){
        $text2.addClass('hide-content')
             .slideDown(0);
      });
    } else {
      $text2.slideUp(0,function(){
        $text2.removeClass('hide-content')
             .slideDown('fast');
      });
    }
    visible = ! visible;
    });


var $button3 = jQuery('#sign-up-myButton3'),
      $text3   = jQuery('#sign-up-content3'),
      visible = false;

    $button3.click(function(){
    if ( visible ) {
      $text3.slideUp('fast',function(){
        $text3.addClass('hide-content')
             .slideDown(0);
      });
    } else {
      $text3.slideUp(0,function(){
        $text3.removeClass('hide-content')
             .slideDown('fast');
      });
    }
    visible = ! visible;
    });

​