折り畳み式容器/カラム。複数のリンクを追加する

Question

私は、この画像に類似したドロップダウンエフェクトを作成しようとしています：GIFしかし、これまでのものはEXAMPLEです。複数のリンクを追加する方法を見つけられないようです。他のコンテンツ部門を追加しても表示されません。誰かが助けてくれることを願っています。おかげ

HTML：

<div class="container"> 
    <div class="header">Projects</div> 
    <div class="content" onclick="initContent('example')"><em>Example Project</em></div> 
</div> 

JSは：

$(".header").click(function() { 
    $header = $(this); 
    //getting the next element 
    $content = $(this).next(); 
    //checking if its already visible 
    $content.slideToggle(500, function() { 
    //execute this after slideToggle is done 
    //change text of header based on visibility of content div 
    $header.text(function() {}); 
    }); 
}); 

私がしようとするだろう何：

：

<div class="container"> 
    <div class="header">Projects</div> 
    <div class="content" onclick="initContent('example')"><em>Example Project</em></div> 
<div class="content" onclick="initContent('exampleNew')"><em>Example Project 2</em></div> 
    </div> 

Answer 1

を、.nextAll()は、すべてを選択します$headerの兄弟（.next()は兄弟を1つだけ選択します）。セレクタ引数を追加して、クラス "content"を持つ要素だけを選択することもできます。

$(".header").click(function() { 
    $header = $(this); 
    //getting the sibling ".content" elements 
    $content = $(this).nextAll(".content"); 
    //checking if its already visible 
    $content.slideToggle(500, function() { 
     //execute this after slideToggle is done 
     //change text of header based on visibility of content div 
     $header.text(function() {}); 
    }); 
}); 

Answer 2

だけで、単一のコンテンツのdiv内のすべてのあなたのリンクを置きますhttps://jsfiddle.net/sfcm95yz/3/

<div class="content"> 
    <div class="item" onlclick="initContent('example')"> 
    <em>Example Project</em> 
    </div> 
    <div class="item" onlclick="initContent('example2')"> 
    <em>Example Project 2</em> 
    </div> 
</div> 

Answer 3

あなたが右後にdisplay: blockを適用するヘッダークラ​​ス要素（$content = $(this).next();）、であるコンテンツのdivを下にスライドされているからです。別のコンテンツ部門を追加した場合は、の直後にとなることはなく、そのヘッダーは表示されません。あなたは、すべてのコンテンツのdivをターゲットに、またはあなたのHTMLを再配置するために、このような何かあなたのJavaScriptを変更することができますいずれか

：あなたのJSを変更し、既存のマークアップを維持したい場合は

<div class="container"> 
    <div class="header">Projects</div> 
    <div class="content"> 
    <div onclick="initContent('example')"> 
     <em>Example Project</em> 
    </div> 
    <div onclick="initContent('example')"> 
     <em>Example Project 2</em> 
    </div> 
    <div onclick="initContent('example')"> 
     <em>Example Project 3</em> 
    </div> 
    </div> 
</div>