/ / base 5 contenu exposé en accordéon - zurb-foundation-5

contenu de base 5 accordéon exposé - zurb-foundation-5

J'essaie d'utiliser le code foundation5 ci-dessous. Le problème est que le contenu est exposé à la charge. J'ai besoin qu'il soit caché jusqu'à ce qu'on clique dessus. J'ai été en mesure de le cacher mais il ne s'agrandira pas. Toute suggestion serait grandement appréciée.

Je vous remercie

<div class="row">
<div class="large-12 columns">
<dl class="accordion" data-accordion>
<dd class="accordion-navigation">
<a href="#panel1b">XXXXXXXXS</a>
<div id="panel1b" class="content active">
Panel 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</dd>
</dl>

Réponses:

1 pour la réponse № 1

Selon le Documents de fondation, la classe active est utilisé pour afficher le contenu correspondant. Donc, si vous ne voulez pas que votre contenu soit affiché lorsque la page est chargée, supprimez la classe active. En outre, assurez-vous de garder votre balise HTML propre. Je vois beaucoup de balises invalides comme des balises non fermées dans l'exemple que vous avez fourni. Votre balisage final devrait ressembler à ceci:

<div class="row">
<div class="large-12 columns">
<dl class="accordion" data-accordion>
<dd class="accordion-navigation">
<a href="#panel1b">XXXXXXXXS</a>
<div id="panel1b" class="content">Panel 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</dd>
</dl>
</div>
</div>