Fondation effondrement de la liste
Lorsque vous voulez cacher une partie de l'écran, vous pouvez réduire la liste.
Exemples
<Class = Li "accordéon navigation ">
<A Href = "#demo"> Pliable Simple </ a>
<Div id = "demo" class = "content">
Ce tutoriel - la science est non seulement la technologie, mais aussi un rêve! ! !
</ Div>
</ Li>
</ Ul>
<! - Initialisation Fondation JS ->
<Script>
$ (Document) .ready (function () {
$ (Document) .foundation ();
})
</ Script>
Essayez »
Des exemples d'analyses
.accordion classes et des data-accordion attribut est utilisé pour créer un élément pliable. .accordion-navigation de classe utilisé pour rendre les éléments pliables. Le contenu réel .content classe (<div class = "content" ) et cliquez sur le bouton pour afficher soit.
Nous avons ajouté à la liste des articles <a> élément à contrôler (afficher / masquer) Le pliable. Puis ancrer le lien avec le contenu pliable avec le même identifiant le contenu (<a href=#demo" 与<div id="demo"> associés).
Remarque: L'effet de pliage doit être initialisé Fondation JS.
Par défaut, le contenu pliable est caché. Nous pouvons dans le <div> précédente .active classe est autorisé à l' affichage par défaut:
effet d'accordéon
effet d'accordéon pour l'extension et définir le contenu pliable.
effet d'accordéon en utilisant une pluralité de différents ancrages et id pour créer un lien:
Exemples
<Class = Li "accordéon navigation ">
<A Href = "#demo"> Accordion instance 1 </ a>
<Div id = classe "démo" = "contenu actif">
Demo 1 - tutoriel - la science est non seulement la technologie, mais aussi un rêve! ! !
</ Div>
</ Li>
<Class = Li "accordéon navigation ">
<A Href = "# demo2"> Accordéon exemple 2 </ a>
<Div id = "demo2" class = "content">
Demo 2 - Lorem ipsum dolor sit amet ....
</ Div>
</ Li>
<Class = Li "accordéon navigation ">
<A Href = "# demo3"> Accordéon exemple 3 </ a>
<Div id = "demo3" class = "content">
Demo 3 - tutorial - la science est non seulement la technologie, mais aussi un rêve! ! !
</ Div>
</ Li>
</ Ul>
Essayez »
Par défaut, l'accordéon a un élément de la liste est ouverte. Si vous voulez fermer tous peuvent utiliser des data-options="multi_expand:true;" ;" propriétés:
Exemples
..
</ Ul>
Essayez »