Аккордеон javascript / css не работает должным образом

У меня есть страница блога, на которой я должен перечислять сообщения, используя jQuery-аккордеон. Мне удалось заставить его работать, но он не отображается должным образом, точнее :высота страницы не увеличивается соответственно размеру сообщения. Вы можете увидеть это здесь:http://melisayavas.com/web/?page_id=22

Я думаю, что это больше проблема CSS, чем jQuery, к сожалению, у меня недостаточно знаний о CSS или jQuery, чтобы действительно быть уверенным, где проблема и как ее исправить.

Это HTML и JS страницы:

    
 'About', 'posts_per_page' => -1 ) ); 
?>

    

    

        

        

        

            

        
        

        ', '
'); ?>

    
    
    

Это CSS, который я использовал:

/* 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;
}

Полный аккордеон jQuery можно найти здесь:http://pastebin.com/hJEufLQU