6

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.

madth3
  • 7,275
  • 12
  • 50
  • 74
cardiac7
  • 491
  • 1
  • 9
  • 26
  • [This answer](http://stackoverflow.com/q/12302819/422353) shows the right way to handle printing. – madth3 Jan 11 '13 at 20:10

3 Answers3

16

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;
}
b3ko
  • 390
  • 2
  • 7
3

In Bootstrap 4, you can use the display utility classes, eg:

<div class="collapse d-print-block">...</div>

voidstate
  • 7,937
  • 4
  • 40
  • 52
0

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;
    }
}
Tadeck
  • 132,510
  • 28
  • 152
  • 198