javascript accordion / css not working properly

Question

I have a blog page on which I have to list the posts using an accordion jQuery. I managed to get it to work but it's not rendering properly, more precisely: the height of the page does not enlarge accordingly to the post size. You can see it here: http://melisayavas.com/web/?page_id=22

I think this is more a CSS problem than a jQuery, unfortunately I don't have enough knowledge of CSS or jQuery to actually be sure where the problem is and how to fix it.

This is the HTML & JS of the page:

<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>

This is the CSS I used:

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

The full accordion jQuery can be found here: http://pastebin.com/hJEufLQU

Answer 1

In jquery.vaccordion.js the height of the accordion element and height of expanded accordion items are being set explicilty:

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

Because of this, the elements are too small to fit the post content. You can either try removing these lines or setting their heights to "auto".

Edit

To answer your addittional comment "Any idea how I can make the first element to auto-expand when the page loads?"

It looks to me like accordion should handle this behavour by default [see accordion demo]. So I am not sure why it is not showing the first element. Anyway, you can resolve this via CSS:

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

JSFiddle example: http://jsfiddle.net/mcDeE/