jquery accordion colapsó de forma predeterminada en la carga de la página

Question

Estoy usando el acordeón de la interfaz de usuario de JQuery en mi página. He siguiente código JavaScript en mi carga de la página:

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

}); 

Cuando se carga la página todas las pestañas abiertas por unos segundos y luego se colapsan. Puede ser su efecto de carga. ¿Cómo puedo hacer que el acordeón de JQ UI se colapsó en la carga de la página? Sugiera

Answer 1

Aunque no es una respuesta directa, tal vez usted puede hacer que se oculta y luego mostrarla cuando su creado:

$("#accordion").accordion({ 
    active: false,    
    autoHeight: false,    
    navigation: true,    
    collapsible: true, 
    create: function(event, ui) { $("#accordion").show(); } 
}); 

Actualizar: Este violín funciona para mí: http://jsfiddle.net/47aSC/6/

Answer 2

Probablemente esté cargando algo cerca del final de la página lentamente. Si no puede arreglar eso, usted podría intentar declarar el elemento que tiene display:none que se le aplica en el CSS, entonces:

$("#accordion").show().accordion({ 
     active: false, 
     autoHeight: false, 
     navigation: true, 
     collapsible: true 
    }); 

Podría haber una forma más limpia de hacerlo (como se sugiere @Mrchief), pero don 't think .accordion() formatos elementos ocultos muy bien. Tendrás que probar.

Answer 3

Para mí esto funciona :

$(function() { 
    $("#accordion").accordion({ 
      collapsible: true, 
      autoHeight: true, 
      active: false 

     }); 
}); 

Answer 4

La mejor solución es:

abre jquery.ui.accordion.js y edita las líneas 29 y 31 (por cierto estoy usando 1.10.4).

Editar la línea 29 a activo: 100, Editar la línea 31 a plegable: true,

De esta manera usted no tiene que escribir ningún script o función en la cabecera de la página. Configurando Active en un número alto (por ejemplo 100) está diciendo que la etiqueta 100a h3 está activa (lo que básicamente no existe).

El plegable: cierto dice que todas las etiquetas h3 abiertos son plegables.

Resuelve el problema por completo.

Answer 5

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

Esto establecerá todos .collapse clases en el DOM para cerrar, pero sólo una vez que el DOM ha terminado de cargar.

Answer 6

// También puede usar el siguiente código para colapsar acordeón en la carga de la página y se debe utilizar cuando estamos usando arranque 2,0

$(document).ready(function() { 
      if ($("#accordianId").length>0) { 
         $("#accordianId").trigger("click"); 
        } 
      }); 

De otra manera debemos utilizar a continuación el código de arranque 3.0

$("#accordianId").accordion("option", "active", 0);