Twitter Bootstrap Accordion - How to print with all expanded?

Question

I am using the Twitter Bootstrap accordions here and there throughout my site. They work great and all that, the issue I just noticed is if I want to Print a page with one on it. Ideally they should all expand if the page is to be printed for my purposes.

Does anyone know the best way to go about this? I know I could hookup something via javascript to a Print button on the page, but let's assume that the user will use the browser's Print button - so tying javascript to this may not be an option.

Answer 1

Use CSS media types and just style all of accordions as expanded, if the media is for printing.

Small example here, expands all accordions only for printing:

@media print {
    /* your stylesheet for printing, eg.: */
    .accordion-group .accordion-body.collapse {
        height: auto;
    }
}

Answer 2

i am using bootstrap 3.1.1 and the bootstrap.css as it comes by default. i am also using the example accordion html from this page: http://getbootstrap.com/javascript/#collapse

and for me adding this rule to the @media print {..} section of the .css file did the trick:

.collapse {
    display: block !important;
    height: auto !important;
}