jQuery liste déroulante?

Question

Départ http://jqueryui.com/demos/draggable/

En bas, il y a une section à onglets. Les secondes onglets "Détails" donne l'exemple de ce que je veux accomplir. Vous pouvez afficher/masquer chaque ligne et afficher/masquer les détails dans cette ligne de liste.

Est-ce que cela fait partie de l'interface utilisateur jQuery? Si oui, est-ce que quelqu'un sait ce que ça s'appelle?

Answer 1

Cela fait partie de jQuery. C'est juste un simple cacher et montrer sur un autre div.

<div class="Control">Toggle</div> 
<div class="Content" style="display: none;">Some content you want to toggle.</div> 

<script> 
    $(".Control").click(function(){ 
     $(this).next(".Content").toggle(); 
    }); 
<script> 

Vos éléments peuvent changer à tout ce que vous voulez, LI, IMG, DIV.

Answer 2

voici un simple accordéon si vous ne voulez pas tous les cacher. supprimez cette ligne $('.contentblock').not(c).hide();

<ul id="accord"> 
    <li> 
    <a href="#">title</a> 
    <div class="contentblock">Content</div> 
    </li> 
    <li> 
    <a href="#">title2</a> 
    <div class="contentblock">Content2</div> 
    </li> 
</ul> 

puis ...

$(function() { 
    $('.contentblock').hide(); 
    $('#accord').delegate('li > a','click',function() { 

    var c = $(this).parent().find('.contentblock').toggle(); 
    $('.contentblock').not(c).hide(); 
    }) 
});