Liste repliable Foundation
Lorsque vous souhaitez masquer une partie du contenu à l'affichage, vous pouvez utiliser une liste repliable.
Exemple
<li class="accordion-navigation">
<a href="#demo">Simple Repliable</a>
<div id="demo" class="content">
Rookie Tutorial -- L'apprentissage n'est pas seulement une technologie, mais aussi des rêves !!!
</div>
</li>
</ul>
<!-- Initialiser Foundation JS -->
<script>
$(document).ready(function() {
$(document).foundation();
})
</script>
Essayez-le vous-même »
Analyse de l'exemple
.accordionclasse etdata-accordionL'attribut est utilisé pour créer un élément repliable..accordion-navigationLa classe est utilisée pour afficher les éléments repliables. Le contenu réel se trouve dans.contentDans la classe (<div class="content"), cliquer sur le bouton l'affichera.
Nous ajoutons aux éléments de la liste<a>élément pour contrôler (afficher/masquer) le contenu repliable. Ensuite, le lien d'ancrage utilise le même id que le contenu repliable (associé à <a href=#demo" et <div id="demo">).
Remarque :L'effet repliable nécessite l'initialisation de Foundation JS.
Par défaut, le contenu repliable est masqué. Nous pouvons le faire à l'aide d'<div>ajouter à.activeune classe pour les rendre visibles par défaut :
Effet accordéon
L'effet accordéon est utilisé pour déplier et définir un contenu repliable.
L'effet accordéon est créé en utilisant plusieurs liens d'ancrage et identifiants différents :
Exemple
<li class="accordion-navigation">
<a href="#demo">Exemple d'accordéon 1</a>
<div id="demo" class="content active">
Démo 1 - Tutoriel d'exemple -- L'apprentissage ne concerne pas seulement la technologie, mais aussi les rêves !!!
</div>
</li>
<li class="accordion-navigation">
<a href="#demo2">Exemple d'accordéon 2</a>
<div id="demo2" class="content">
Démo 2 - Lorem ipsum dolor sit amet....
</div>
</li>
<li class="accordion-navigation">
<a href="#demo3">Exemple d'accordéon 3</a>
<div id="demo3" class="content">
Démo 3 - Tutoriel d'exemple -- L'apprentissage ne concerne pas seulement la technologie, mais aussi les rêves !!!
</div>
</li>
</ul>
Essayez-le vous-même »
Par défaut, un élément de liste d'accordéon est ouvert. Si vous souhaitez les fermer tous, vous pouvez utiliserdata-options="multi_expand:true;"Propriété :
Exemple
..
</ul>
Essayez-le vous-même »