Jquery multiple show and hide - 表示されている場合は他の人を非表示にします。

Question

こんにちは私は周りを見回し、私の正確な問題を見つけることはできません。

私が持っているものは、複数の列があり、さらに読み込みボタンを押して表示すると、余分な内容を表示して非表示のdivを表示すると、そのボタンがトグルしてクリックされると閉じるようになります。

しかし、次のボタンを前のdivを閉じて自分のものを開くようには思えません。

ここ

が私のコードです：

$('#slidebtn-1').click(function() { 
    $('#slidecontent-1').slideToggle(500); 
    $(this).text($(this).text() == 'Read more' ? 'Close' : 'Read more'); 
    return false; 
}); 
$('#slidebtn-2').click(function() { 
    $('#slidecontent-2').slideToggle(500); 
    $(this).text($(this).text() == 'Read more' ? 'Close' : 'Read more'); 
    return false; 
}); 
} 

は、HTML：

<div class="col"> 
    Content 
    <div id="slidecontent-1" class="hide"> 
     Hidden content goes here 
    </div> 
    <a id="slidebtn-1" class="more-btn" href="#slidecontent-1">Read more</a> 
</div> 
<div class="col"> 
    Content 
    <div id="slidecontent-2" class="hide"> 
     Hidden content goes here 
    </div> 
    <a id="slidebtn-2" class="more-btn" href="#slidecontent-2">Read more</a> 
</div> 

任意の助けいただければ幸いです！

乾杯

Answer 1

あなたの質問の説明とあなたのコードが違うと感じました。「＃slidebtn-2」をクリックしたときに「＃slidecontent-1」を閉じることを意味しましたか？

これが当てはまる場合、@ ofir-baruchのコメントが最も適切です。おそらく一般的な機能が必要です。

それぞれのボタンには、slidDown：trueなどのコンテンツ領域に属性を追加することができます。これらのボタンのいずれかがクリックされると、divに現在slidDown：trueのdivがあるかどうかをslideToggleにし、独自のコンテンツdivに追加し、独自のdivをslideToggleします。ここでは一例でjsFiddleへのリンクです：jqueryの要素平等のテストのためにこれに

http://jsfiddle.net/willbuck/NvXQt/1/

クレジット： How would you compare jQuery objects?

Answer 2

私は強く、表示/非表示ボタンと隠しコンテンツ領域の両方のクラスを使用してお勧めします。各ボタンのイベントハンドラを記述する必要はなく、同じ機能を持つすべての要素に適用するイベントハンドラを持つ必要があります。このような何か：

<div class="col"> 
    Content 
    <div id="slidecontent-1" class="hide content"> 
     Hidden content goes here 
    </div> 
    <a id="slidebtn-1" class="more-btn" href="#slidecontent-1">Read more</a> 
</div> 
<div class="col"> 
    Content 
    <div id="slidecontent-2" class="hide content"> 
     Hidden content goes here 
    </div> 
    <a id="slidebtn-2" class="more-btn" href="#slidecontent-2">Read more</a> 
</div> 

とイベントコード：

$('.more-btn').click(function() { 
    $('.content-open').slideToggle(500).toggleClass('content-open'); 
    $(this).parent().find('.content').slideToggle(500).toggleClass('content-open'); 
    $(this).text($(this).text() == 'Read more' ? 'Close' : 'Read more'); 
    return false; 
}); 

Answer 3

私が理解から、あなたはslidecontent1が閉鎖されることにしたい場合は、slidecontent 1と2 との反応がありません（後になってオープンされている）slidecontent2が "活性化"されているときは、もう一方のスライドにアクションを含める必要があります。例えば は：

$('#slidebtn-1').click(function() { 
    $('#slidecontent-1').slideToggle(500); 
    $(this).text($(this).text() == 'Read more' ? 'Close' : 'Read more'); 
    return false; 
}); 
$('#slidebtn-2').click(function() { 
    $('#slidecontent-2').slideToggle(500); 
    $(this).text($(this).text() == 'Read more' ? 'Close' : 'Read more'); 
    $('#slidecontent-1').slideToggle(500); 
    $('#slidecontent-1').text($('#slidecontent-1').text() == 'Read more' ? 'Close' : 'Read more'); 
    return false; 
}); 

真実は、それらslidecontentsを切り替えるための一般的な機能を使用することがよりeffecientであり、他のすべてのスライドを閉じ、この関数ループ（.each）に含めることです。