example - panel colapsable jquery

Problema de JQuery Accordion Auto Height

Question

Estoy usando JQuery Accordion. Tengo esta página aquí: http://www.hauppauge.com/site/support/support_colossus.html#tabs-6

Lo que ocurre es que Auto Height tarda algo de tiempo en cargarse, antes de que se cargue hay mucho espacio en blanco debajo del contenido. Cuando finalmente se carga, la altura se ampliará por más tiempo y luego se ajustará a la altura correcta del contenido. ¿Hay alguna manera de que esto sea perfecto? Solo quiero hacer clic en la pestaña Acordeón y expandirla sin problemas a la altura exacta del contenido.

Actualización 08/08/2014:

Use heightStyle: "content" si usa la versión 1.9 y superior (respuesta Tarun''s )

Use autoHeight: false para 1.8 y menor (respuesta de iappwebdev)

Answer 1

Deberías usar

$("#accordion").accordion({ 

heightStyle: "content" 

});

Establecerá la altura de acuerdo a su contenido. y no usará espacio en blanco como altura.

Answer 2

Entonces, ¿por qué no pones el autoheight en falso?

$( ".selector" ).accordion({ autoHeight: false });

http://jqueryui.com/demos/accordion/#option-autoHeight

EDITAR

Mirando tu comentario:

// Accordion
$("#accordion").accordion({ header: "h3" });
$("#accordion").accordion({ collapsible: true });
$("#accordion").accordion({ autoHeight: false, navigation: true });

Está inicializando el acordeón y luego le agrega más opciones. ¿Por qué estás haciendo eso? El valor predeterminado para autoHeight es true , por lo que cada pestaña obtiene una altura fija. Pon todas las opciones en una sola llamada:

// Accordion
$("#accordion").accordion({
    header: "h3",
    collapsible: true,
    autoHeight: false,
    navigation: true 
});

EDITAR

En cuanto a tu segundo comentario:

Eche un vistazo a http://jqueryui.com/demos/accordion/#option-header . Puede ver que la opción h3 está configurada de manera predeterminada, por lo que no tiene que configurarla en su llamada.

Y obtendrá una respuesta a su pregunta aquí: el acordeón JQuery no funciona sin las etiquetas h3 .

Es muy importante ir a través de jQuery API para mejorar tu conocimiento. Para jQuery API, vaya a http://api.jquery.com/ y para jQuery UI vaya a http://jqueryui.com/demos/ . Si tiene más preguntas, no dude en preguntar después de haber intentado resolver su problema y después de investigar un poco.

Si todo esto respondió a su pregunta, márquelo como respuesta correcta.

Answer 3

Esto funcionó para mí.

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

Answer 4

Si nada funciona hasta el momento, simplemente contentElement el tamaño del jQuery Accordion contentElement : se llama data-content de manera predeterminada, a menos que lo haya configurado de manera diferente:

$(''.accordion'').find(''[data-content]'').resize();

Esto también funcionaría si desea cambiar el tamaño del Acordeón después de que sus datos se carguen dinámicamente.

Answer 5

$("#accordion").accordion({ 

heightStyle: "content" 

});

¡Esto está funcionando en una nueva versión, funcionó para mí!