/ / contenido expuesto del acordeón de la fundación 5 - zurb-foundation-5

contenido expuesto de la fundación 5 acordeón - zurb-foundation-5

Estoy tratando de usar el siguiente código de foundation5. El problema es que el contenido está expuesto en la carga. Necesito que esté oculto hasta que haga clic. Pude ocultarlo pero luego no se expandirá. Cualquier sugerencia sería muy apreciada.

Gracias

<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>

Respuestas

1 para la respuesta № 1

Según el Documentos de la Fundación, la clase active se usa para mostrar el contenido correspondiente. Por lo tanto, si no desea que se muestre su contenido cuando se carga la página, elimine la clase. active. Además, asegúrese de mantener su marcado de HTML limpio. Veo muchas etiquetas no válidas como etiquetas no cerradas en el ejemplo que proporcionó. Su marcado final debería verse así:

<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>