javascript accordion/css no funciona correctamente

Question

Tengo una página de blog en la que tengo que enumerar las publicaciones utilizando un accordion jQuery. Me las arreglé para que funcione, pero no se está procesando correctamente, más precisamente: la altura de la página no se agranda de acuerdo con el tamaño del poste. Puede verlo aquí: http://melisayavas.com/web/?page_id=22

Creo que esto es más un problema de CSS que un jQuery, desafortunadamente no tengo suficiente conocimiento de CSS o jQuery para estar seguro de dónde está el problema y cómo solucionarlo.

Este es el código HTML & JS de la página:

<script type="text/javascript"> 
     $(function() { 
      $('#va-accordion').vaccordion(); 
     }); 

    </script> 


<div id="va-accordion" class="va-container"> 
<div class="va-wrapper"> 
<div class="about-page">  
<?php query_posts(array ('category_name' => 'About', 'posts_per_page' => -1)); 
?> 
<?php if (have_posts()) : while (have_posts()) : the_post(); ?> 
    <div class="va-slice"> 
    <article class="about" id="about-<?php the_ID(); ?>"> 
     <div class="title"><h2><?php the_title(); ?></h2></div> 
     <div class="va-content"> 
     <div class="entry"> 
      <li><?php the_content(); ?></li> 
     </div> 
     </div> 

     <?php edit_post_link('Edit this entry.', '<p>', '</p>'); ?> 

    </article> 
    </div> 
    <?php endwhile; endif; ?> 

</div> 
</div> 
</div> 

Este es el CSS utilicé:

/* Vertical Accordion Style */ 
.va-container{ 
position:relative; 
} 
.va-wrapper{ 
width:100%; 
height:100%; 
position:relative; 
overflow:hidden; 
background:#000; 
} 
.va-slice{ 
cursor:pointer; 
width:100%; 
left:0px; 
overflow:hidden; 
} 

.va-title{ 
} 
.va-content{ 
display:none; 
margin-left:25px; 
} 
.va-slice p{ 
} 
.va-slice ul{ 
margin-top:20px; 
} 
.va-slice ul li{ 
} 
.va-slice ul li a{ 
} 
.va-slice ul li a:hover{ 
} 

.post { 
border: 2px solid; 
border-radius: 10px; 
clear: both; 
overflow: hidden; 
padding: 20px; 
margin-top: 28px; 
} 

.about { 
clear: both; 
overflow: hidden; 
} 

.about-page { 
border: 2px solid; 
border-radius: 10px; 
clear: both; 
overflow: hidden; 
padding: 20px; 
margin-top: 28px; 
} 

El jQuery acordeón completo se puede encontrar aquí: http://pastebin.com/hJEufLQU

Answer 1

En jquery.vaccordion.js la altura del elemento de acordeón y la altura de los elementos de acordeón expandido se están estableciendo explicilty:

line 300 - accordionH : 450 
... 
line 305 - expandedHeight: 350 

Debido a esto, los elementos son demasiado pequeños para ajustarse al contenido de la entrada. Puede intentar eliminar estas líneas o establecer sus alturas en "auto".

Editar

Para responder a su comentario addittional " Cualquier idea de cómo puedo hacer que el primer elemento de auto-expandirse cuando se carga la página?"

A mi me parece como acordeón debe manejar este comportamiento por defecto [see accordion demo]. Así que no estoy seguro de por qué no muestra el primer elemento. De todos modos, se puede resolver este a través de CSS:

#va-accordion .va-slice:first-child .va-content{ 
    display: block;  
} 

jsFiddle ejemplo: http://jsfiddle.net/mcDeE/

Answer 2

<script> 
    $(document).ready(function() { 
       $('.va-slice').click(function(){ 
        var index_div = $(this).index(); 
        var element = $('.va-slice').eq(index_div); 
       }); 
    }); 
</script> 

Aplica la secuencia de comandos que agrega una clase 'explicit_va' en ese elemento

.explicit_va{ 
     min-height:0px !important; 
     height:100% !important; 
     } 

Answer 3

<script> 
$(document).ready(function() { 
      $('.va-slice').click(function(){ 
       var index_div = $(this).index(); 
       //console.log(index_div); 

       var element = $('.va-slice').eq(index_div); 
       //console.log(element); 
       //var getHeight = element.height(); 
       //console.log(getHeight); 

       console.log(element.attr('style', ''));   
       console.log(element.addClass('explicit_va')); 

      }); 
}); 
</script> 

Más: http://source88.blogspot.com/search/label/Accordion