Bootstrap Collapse Accordion - Default Expand/Collapse?

Question

I\'m using Twitter Bootstrap, with jQuery.

According to the bootstrap docs, if you want the collapsible element open as default you add the additional class \"in\". And

Answer 1

You can't achieve this type of behavior only with Media Queries as Twitter Bootstrap's Accordion looks for the .in class in order to expand/collapse the respective .accordion-body.

An option is to detect the window width on page load and then add the use Bootstrap's .collapse() method to show/hide the .accordion-body.

$(function(){
    $(window).resize(function() {    // Optional: if you want to detect when the window is resized;
        processBodies($(window).width());
    });
    function processBodies(width) {
        if(width > 768) {
            $('.accordion-body').collapse('show');
        }
        else {
            $('.accordion-body').collapse('hide');
        }
    }
    processBodies($(window).width());
});

DEMO: http://jsfiddle.net/grim/z2tNg/