Jquery tabs: autoHeight for expanding content

Question

I am using jquery sliding tabs from this SITE , which work very nice. The only problem is that the autoHeight jquery function does not adjust to expanding content. Rephrase: The tab container will ajust to the height of the inactive content but the issue is that once the content inside container becomes active and expands vertically it will no longer fit and not be seen <--- It fails to adjust to that. Here is the example JSFFIDLE

I try doing this to adjust the height to expanding content but it is not working:

<script>
 var height = 50 // Set to the height you want
        $('.st_view').css('height', height+'px')

    });​

    </script>

Overall Jquery

 <script>

    $(document).ready(function() {

        $('div#st_horizontal').slideTabs({
            // Options              
            contentAnim: 'slideH',
            autoHeight: true,
            contentAnimTime: 600,
            contentEasing: 'easeInOutExpo',
            tabsAnimTime: 300
        });

        var height = 50 // Set to the height you want
        $('.st_view').css('height', height+'px')

    });​

    </script>

Answer 1

If it is only togglers that cause the content to expand, you can modify your toggler code like this:

$('#title').click(function() {
    $(this).toggleClass('active');
    $('#content').toggle();
    var $tab = $(this).closest('.st_tab_view');
    $tab.closest('.st_view').css('height', $tab.height());
});

For a more general solution, get the jQuery resize plugin , and add this code:

$('.st_tab_view').resize(function() {
    var $this = $(this);
    $this.closest('.st_view').css('height', $this.height());
});