javascript accordion / css not working properly

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

Answers:

Answer

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/

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

Apply the script which add a class 'explicit_va' on that element

    .explicit_va{
        min-height:0px !important;
        height:100% !important;
        }
Answer
<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>

More : http://source88.blogspot.com/search/label/Accordion

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.