jQuery Akkordeon wie Tabs

Question

Ich benutze Bootstrap und ein jQuery Akkordeon. Ich muss Tabs in einem ähnlichen Stil mit dem Akkordeon machen. Ich meine, die anklickbaren Elemente sollten inline sein (wie der Stil der Tabs) und nicht wie eine Liste (untereinander).

Gibt es eine Möglichkeit, dies zu tun?

Answer 1

Für Ihre spezifische Anforderungen, ich glaube, Sie brauchen syden Antwort, mit einem klein wenig der Anpassung zu verwenden.
Verwenden Sie Bootstraps Collapse-Komponente.

<p> 
<a class="btn btn-primary btn1" aria-expanded="false" aria-controls="collapseExample"> 
Link with href 
    </a> 
    <button class="btn btn-primary btn2" type="button" aria-expanded="false" aria-controls="collapseExample"> 
Button with data-target 
</button> 
    </p> 
    <div class="collapse" id="collapseExample1"> 
<div class="card card-block"> 
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. 
</div> 
</div> 
<div class="collapse" id="collapseExample2"> 
<div class="card card-block"> 
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. 
</div> 
</div> 

dann mit Javascript, eine Funktion benutzerdefinierten Klick machen, so dass, wenn Sie einen Zusammenbruch geöffnet haben, zunächst die anderen alle, dann versteckt zeigt diejenige, die Sie geklickt - so dass Sie nicht zweimal klicken müssen .

$(".btn1").on("click", function(){ 
$(".collapse").collapse('hide') 
$("#collapseExample1").collapse('show') 
}); 
$(".btn2").on("click", function(){ 
$(".collapse").collapse('hide') 
$("#collapseExample2").collapse('show') 
}); 

Hinweis: Sie müssen eine On-Click-Funktion für jede Ihrer Schaltflächen hinzufügen, damit dies funktioniert.

Answer 2

Ich kann an 2 Bootstrap-Komponenten denken, um das zu erreichen, Tags & kollabieren.

Tags (span)

Put tags inside collapse

Answer 3

Ich habe Tabs in einem ähnlichen Stil, mit dem Akkordeon zu tun. Ich meine, die anklickbaren Elemente sollten inline sein (wie der Stil der Tabs) und nicht wie eine Liste (untereinander).

Wenn ich die Frage richtig verstehe, können Sie dies erreichen, indem Sie Folgendes tun.

Wickeln Sie alles innerhalb der panel-group als Bootstrap veranschaulicht und verwenden Sie einfach eine <ul> Liste mit der Klasse nav nav-tabs für Ihre Links, die auf die div-Panels zielen.

<div class="panel-group" id="accordion" role="tablist"> 
    <!-- Bootstrap Nav tabs --> 
    <ul class="nav nav-tabs"> 
    <li><a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"></li> 
    ... 
    </ul> 
    <!-- Bootstrap collapse --> 
    <div class="panel panel-default"> 
    <div id="collapseOne" class="panel-collapse collapse in"> 
     ... 
    </div> 
    ... 
    </div> 
</div> 

entfernen Sie dann die Standardtafel

.panel-default { 
    border: 0; 
} 

Keine Notwendigkeit grenzt zusätzliche Javascript hinzufügen möchten, nutzen, was Bootstrap bereits zur Verfügung stellt.

Hier ist ein funktionierender Codepen für Sie zu überprüfen. http://codepen.io/yongchuc/pen/YpZvOJ