jquery - jQuery の複数の非表示および表示パネル

Question

アイデアは、次のようなフィルタを右側に配置することです: - フィルタ切り替えの例

したがって、基本的には、例のように複数の展開および折りたたみ div を使用できるようにしたいと考えています。私が見つけたプラグインでは、常に 1 つの div しか展開できません。

どんな助けでも素晴らしいでしょう、

ありがとう

Answer 1

jQuery UIアコーディオンを使用できますが、複数のセクションでアコーディオンを使用する代わりに、1つのセクションで複数のアコーディオンを作成できます。

使用しているプラ​​グインはわかりませんが、同じトリックを使用できる可能性があります。

またはあなた自身を書いてください...

<div class="panel collapsed">
    <h2 class="header">header1</h2>
    <div class="content">This is content</div>
</div>
<div class="panel">
    <h2 class="header">header2</h2>
    <div class="content">This is content</div>
</div>​​​​​​​​​​​​​​

CSS ...

.panel {
    margin-bottom: 10px;
    background-color: silver;
    width: 200px;
}
.panel .header {
}
.panel.collapsed .content {
    display: none;
}

そしてJavaScript（jQueryを使用）...ここにJSFiddle

$(".panel .header").click(function() {
    $(this).parent().toggleClass("collapsed")
})

または、フェードが好きな場合は... JSFiddle here

​$(".panel .header").click(function() {
    $(this).next().fadeToggle();
})

</ p>

Answer 2

このストロークで複数のパネルを表示および非表示にできます。

これがデモです

jQuery

$('.content').slideUp(1000);

$('.panel').click(function() {//open
   var takeID = $(this).attr('id');//takes id from clicked ele
   $('#'+takeID+'C').slideDown(1000);//show's clicked ele's id macthed div = 1second
});
$('span').click(function() {//close
   var takeID = $(this).attr('id').replace('Close','');//strip close from id = 1second
    $('#'+takeID+'C').slideUp(1000);//hide clicked close button's panel
});​

html：

<div class="panel" id="panel1">panel1</div>
<div id="panel1C">content1
  <span id="panel1Close">X</span>
</div>

<div class="panel" id="panel2">panel2</div>
<div id="panel2C">content2
  <span id="panel2Close">X</span>
</div>

<div class="panel" id="panel3">panel3</div>
<div id="panel3C">content3
  <span id="panel3Close">X</span>
</div>

</ p>

Answer 3

この質問/回答を見てください。

jQuery(document).ready(function(){
    $('.accordion .head').click(function() {
        $(this).next().toggle();
        return false;
    }).next().hide();
});