javascript - closed - elementor accordion cerrado

¿Cómo puedo cargar mi acordeón con todos los menús cerrados?

Question

Estoy tratando de seguir el ejemplo aquí

http://twitter.github.com/bootstrap/javascript.html#collapse

He colocado una maqueta aquí

http://jsfiddle.net/gqe7g/

El comportamiento de carga es extraño. Muestra Menú1 luego colapsa y luego muestra Menú2 y Menú3. Me gustaría que todo se abriera. He intentado lo siguiente sin éxito

$(''#accordion'').collapse({hide: true})

Answer 1

Cambio

class="accordion-body collapse in"

A

class="accordion-body collapse"

En su colapso One DIV

Answer 2

Del doc:

Si desea que se abra de forma predeterminada, agregue la clase adicional en.

En otras palabras, omita el "en" y se cerrará de manera predeterminada. http://jsfiddle.net/JBRh7/

Answer 3

Puede pasar la opción toggle: false a la declaración de colapso para tener todos los elementos del acordeón ocultos en la carga, así:

$(''.collapse'').collapse({
toggle: false
});

Demostración: http://jsfiddle.net/gqe7g/9/

Answer 4

Reemplazando

$(".collapse").collapse();
$(''#accordion'').collapse({hide: true})

con:

$(''#collapseOne'').collapse("hide");

debería hacer el truco. Creo que el primero está activado por defecto y esta línea lo apaga.

Answer 5

Sé que esta es una discusión antigua, pero aquí hay dos soluciones más que funcionaron:

1) Agregar

una clase de aria-expanded="true" dentro de este enlace:

<a data-toggle="collapse" data-parent="#accordion"...></a>

2) En caso de que esté utilizando paneles (como a continuación)

<div id="collapse1" class="panel-collapse out collapse in" style="height: auto;">

cambiar el collapse in para collapse out también hará el truco

Answer 6

Si desea cerrar todo colapsado en la carga de la página:

En el collapse in clase, sustitúyalo por el collapse clase.

id="collapseOne" class="panel-collapse collapse **in**" role="tabpanel" aria-labelledby="headingOne">

Actualización para:

id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">

Answer 7

Si desea que el accordion collapse inicialmente, puede hacerlo con las definiciones de bootstrap preexistentes, javascript es innecesario.

Agregar la clase collapsed al anclaje o al manipulador que será el objetivo de clics para que los usuarios los toggle o cierren. Además, elimine la clase del contenedor colapsado.

Bootstrap también proporciona un par de especificaciones opcionales que se pueden pasar agregando data-parent="" y data-toggle=""

• data-parent acepta un selector y especifica que todos los elementos colapsables que son hermanos del padre de datos se cambiarán al unísono.
• data-toggle acepta un booleano true o false y establece la invocación en el elemento colapsable.

Escenarios de ejemplo:

➤ Se colapsará

<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
Title
</a>
</div>
<div id="collapseOne" class="accordion-body collapse">
<div class="accordion-inner">
Details

➤ Se expandirá la carga

<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
Title
</a>
</div>
<div id="collapseOne" class="accordion-body">
<div class="accordion-inner">
Details

➤ Se expandirá la carga

<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
Title
</a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
<div class="accordion-inner">
Details

En el tercer ejemplo, el acordeón se expandirá de manera predeterminada independientemente del hecho de que la clase collapsed se especifique porque la clase en el contenedor recibirá más peso.

Si desea desencadenar el acordeón a través de Javascript, solo tiene que llamar al método collapse() junto con el identificador de id o selector de clase apropiado que se dirige al elemento colapsable.

collapse() también acepta las mismas opciones que se pueden agregar al marcado. data-parent y data-toggle

Answer 8

Simplemente elimine la clase .in de .panel-collapse en "collapseOne". (Bootstrap v3.3.7)

Answer 9

Use el método hide que proporciona Bootstrap,

$(''.collapse'').collapse(''hide'')

Demostración en http://thefanciful.com . Mi información está oculta en la carga y se activa cuando se presiona el botón. :)

Answer 10

esto es lo que uso para mi acordeón. comienza completamente cerrado. usted quiere

 active: false;//this does the trick

completo:

<div id="accordian_div">
<h1>first</h1>
<div>
put something here
</div>
<h1>second</h1>
<div>
put something here
</div>
<h1>third</h1>
<div>
put something here
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#accordian_div").accordion({
collapsible: true,
active: false,
clearStyle: true
});
});
</script>

No estoy familiarizado con bottstrap, pero esto parece un poco más limpio que todas las clases con las que tienes que lidiar y funciona sin problemas.

Answer 11

te estás perdiendo la clase "en" en divs de acordeón-cuerpo para Menú2 y Menú3

cada uno de los divs del cuerpo del acordeón debe tener class="accordion-body collapse in" . En este momento, un par de ellos solo tienen class="accordion-body collapse"

http://jsfiddle.net/fcJJT/

Answer 12

Usando jQuery , esto funcionó para que TODOS los contenedores colapsasen al cargar la página

Agregar {active: false} y debe tener collapsible habilitado por supuesto

 $(function () {
$("#accordion").accordion({ collapsible: true, active: false });
$(".selector").accordion();
});

Answer 13

<script type="text/javascript">
jQuery(document).ready(function ($) {
$(''#collapseOne'').collapse("hide");
});
</script>