JQUERY UI Accordion start contraído

82

¿Cómo puedo hacer que el acordeón jquery UI comience a colapsar cuando se carga el formulario? ¿Existe algún código javascript para esto?

H Bellamy
fuente

Respuestas:

197

En sus opciones especifique:

{
  ...
  active: false,
  collapsible: true,
  ...
}

Consulte la documentación de active .

topek
fuente
todavía funciona en JQuery 1.4.4 a partir de hoy, aunque Visual Studio 2010 arroja un error de JScript (sin error en la interfaz de usuario) en IE 8
deltree
9

Estaba intentando hacer lo mismo. Usando las pestañas de Jquery UI. No quería que se mostrara ninguno con 5 pestañas al comenzar.

al usar active: false mostró el contenido de la quinta pestaña. Así que configuré las pestañas CSS para mostrar: ninguna; ya que cambia de pantalla en línea. ¡Espero que esto ayude a alguien!

<script>
$(function() {
    $( "#tabs" ).tabs({
        active: false,
        collapsible: true,
    });
});

Y en el estilo

#tabs-1, #tabs-2, #tabs-3, #tabs-4, #tabs-5{ 
    display:none;
}
no no no no no NO
fuente
4

Usé este código, ya que estaba usando un widget de Dreamweaver, el código que Topek no funcionó para mí, espero que esto ayude,

jQuery("#jQueryUIAccordion").accordion({ 
        event: "click",
        active: false,
        collapsible: true,
        autoHeight: false

    });
Lyndon John Haslam
fuente
3

Para completar la respuesta de topex , con Jquery UI 1.10.3 tuve que configurar la opción 'plegable' antes de la 'activa'.

$( ".accordion" ).accordion("option", { 
    collapsible: true,
    active: false
});

Ver la documentación

Shagshag
fuente
1

Si está utilizando las "Propiedades" de wysiwyg y la codificación confunde, intente poner un número en el cuadro "Activo" uno más que su lista de Secciones. Tengo 12 secciones y puse "13" allí y funcionó para mí.

Steve
fuente
1

Si está usando el acordeón jquery predeterminado, siempre muestra el contenido del primer panel, puede deshabilitarlo usando el active: falseatributo.

jQuery(document).ready(function() {
    jQuery( "#accordion" ).accordion({
      collapsible: true,
      active: false,
    });
});

pero su comportamiento predeterminado es que todos los paneles se establecerán a la altura del panel más alto. entonces, para eso tienes que agregar "heightStyle"atributo.

heightStyle: "content",

por lo tanto, cada panel será tan alto como su contenido.

Ashish P
fuente
0

Si observa el comienzo del grupo de paneles en su código, busque esto

<div id="collapseOne1" class="panel-collapse collapse in"> 

si simplemente quita el "en", el panel se cierra cuando se carga la página.

usuario6236374
fuente