Zusammenklappbarer Behälter/Säule. Hinzufügen von mehr als einem Link

Question

Ich versuche, einen Drop-Down-Effekt ähnlich wie dieses Bild zu erstellen: GIF, aber mit dem, was ich bisher habe: EXAMPLE Ich kann nicht scheinen, eine Möglichkeit herauszufinden, mehr als einen Link hinzuzufügen, wenn ich nur ein anderes Inhalts-div hinzufüge, taucht es nicht auf .. Hoffe, dass jemand helfen kann, habe den Schlaf über diesen haha ​​verloren. Dank

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

Was würde ich versuchen:

<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

Wenn Sie Ihre JS ändern möchten, und halten das bestehende Markup, .nextAll() wählt alle $header Geschwister (.next() wählt nur ein Geschwister). Sie können auch ein Auswahlargument hinzufügen, um sicherzustellen, dass Sie nur Elemente mit der Klasse "content" auswählen.

$(".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

einfach alle setzen Sie Ihre Links in einem einzigen Inhalt 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

Es ist, weil Sie den Inhalt div Abrutschen sind die direkt nach die Header-Klasse Element ($content = $(this).next();), die eine display: block auf sie zutrifft. Wenn Sie ein weiteres Inhalts-Div hinzufügen, wird es nicht direkt nach sein, dass Header und so nicht angezeigt werden.

Sie können entweder ändern Sie JavaScript, um alle Inhalte divs zu zielen oder neu anordnen Ihre HTML, so etwas wie dieses:

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