title: javascript accordion / css not working properly
body: <p>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: <a href="http://melisayavas.com/web/?page_id=22" rel="noreferrer">http://melisayavas.com/web/?page_id=22</a></p>
  
  <p>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. </p>
  
  <p>This is the HTML &amp; JS of the page: </p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
          $(function() {
              $('#va-accordion').vaccordion();
          });
  
      &lt;/script&gt;
  
  
  &lt;div id="va-accordion" class="va-container"&gt;
  &lt;div class="va-wrapper"&gt;
  &lt;div class="about-page"&gt;    
  &lt;?php query_posts( array ( 'category_name' =&gt; 'About', 'posts_per_page' =&gt; -1 ) ); 
  ?&gt;
  &lt;?php if (have_posts()) : while (have_posts()) : the_post(); ?&gt;
      &lt;div class="va-slice"&gt;
      &lt;article class="about" id="about-&lt;?php the_ID(); ?&gt;"&gt;
          &lt;div class="title"&gt;&lt;h2&gt;&lt;?php the_title(); ?&gt;&lt;/h2&gt;&lt;/div&gt;
          &lt;div class="va-content"&gt;
          &lt;div class="entry"&gt;
              &lt;li&gt;&lt;?php the_content(); ?&gt;&lt;/li&gt;
          &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;?php edit_post_link('Edit this entry.', '&lt;p&gt;', '&lt;/p&gt;'); ?&gt;
  
      &lt;/article&gt;
      &lt;/div&gt;
      &lt;?php endwhile; endif; ?&gt;
  
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is the CSS I used:</p>
  
  <pre><code>/* 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;
  }
  </code></pre>
  
  <p>The full accordion jQuery can be found here: <a href="http://pastebin.com/hJEufLQU" rel="noreferrer">http://pastebin.com/hJEufLQU</a></p>