jquery agregar dinámicamente al acordeón

Question

Utilizando el example from jQuery UI, traté de agregar dinámicamente una sección al acordeón (basado en this), pero no puedo hacer que el acordeón cambie de tamaño correctamente. La nueva sección desborda el contenedor de acordeón, y cuando se hace clic, se aplasta en el contenedor, ocultando los contenidos de la sección. Ver fiddle.

¿Cómo puedo agregar una sección y obtener el acordeón para cambiar el tamaño?

$(function() { 
    $("#accordion").accordion({ 
     fillSpace: true 
    }); 

    // I want to dynamically add sections to the accordion, 
    // but it doesn't resize properly... 
    $("#accordion") 
       .append('<h3><a href="#">New Section</a></h3><div><p>hello world</p></div>') 
       .accordion("destroy") 
       .accordion({ fillSpace:true }) 
       .accordion("resize") 
     ; 

    $("#accordionResizer").resizable({ 
     minHeight: 140, 
     resize: function() { 
      $("#accordion").accordion("resize"); 
     } 
    }); 
}); 

Answer 1

Si elimina el atributo de altura en accordionResizer (height:220px), todo funciona como debería. Parece que la altura que ha elegido es demasiado baja para el contenido, de ahí el desbordamiento.

Si necesita algo más que la altura predeterminada para ajustar el contenido, intente asignar dinámicamente el alto del accordionResizer cada vez que agregue una nueva sección.

algo así como ...

var height = $("#accordion h3").size() * $("#accordion h3:first").height() + 50; 
     // add 50px to  allow room for the section contents. 
$("#accordionResizer").height(height); 

Answer 2

jQuery UI acordeón tiene el tamaño del elemento de cuando se llama. Tendría que llamar a algún tipo de método de actualización en él.

Answer 3

La emisión y respuesta están bien (como todavía se puede destruir y recrear el acordeón), pero son anticuadas ahora con la introducción de jQuery 1.10.0 añadiendo un nuevo refresh método que maneja la multa de redimensionamiento. Dada la nueva versión de jQuery, ahora escribiría el código de la siguiente manera:

$(function() { 
    // Add the following parameters otherwise the last entry 
    // added to the accordion will be active after the refresh. 
    // 
    $("#accordion").accordion({ 
     collapsible: true, // Let's you squash all of the headings 
     active: false // Defaults to having all of the headings squashed 
    }); 

    // Now you can dynamically add to the accordion and refresh it. 
    // 
    $("#accordion") 
      .append('<h3><a href="#">New Section</a></h3><div><p>hello world</p></div>') 
      .accordion("refresh"); // A graceful recreation of the accordion. 
});