Printing collapsed css divs

Question

I am using the following to run some expanding/collapsing divs

<div class="FAQ">
    <a href="#hide1" class="hide" id="hide1">+</a>
    <a href="#show1" class="show" id="show1">-</a>
    <div class="question"> Question Question Question Question Question Question Question Question Question Question Question? </div>
        <div class="list">
            <p>Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer </p>
        </div>
</div>

CSS

/* source: http://www.ehow.com/how_12214447_make-collapsing-lists-java.html */

.FAQ { 
    vertical-align: top; 
    height:auto !important; 
}
.list {
    display:none; 
    height:auto;
    margin:0;
    float: left;
}
.show {
    display: none; 
}
.hide:target + .show {
    display: inline; 
}
.hide:target {
    display: none; 
}
.hide:target ~ .list {
    display:inline; 
}

as found (and continued) here Pure CSS collapse/expand div

My issue is that I can't get my expanded div to print either using Ctrl+p or using a function printpage script.

I am new to this kind of thing and I feel the answer must be staring me in the face. Is there something I can add to my print.css file to force it to at least ignore the funcitonality of the class FAQ and print all that is hidden if I can't get it to print just the expanded div.

Thanks in advance.

[This Link](http://www.w3schools.com/css/css_mediatypes.asp) might help you — Siva Tumma, Oct 30 '13 at 16:45

LarsBar · Answer 1 · 2013-10-30T16:15:17.897

3

The best way to ignore the functionality of your expand/collapse is to just expand the answer divs through the styling in your print.css.

    .list {
        display: inline;
    }

edited Oct 30 '13 at 16:15

answered Oct 30 '13 at 16:07

LarsBar

41
2

That makes perfect sense. I can't work out why it doesn't work!! I am going to sleep on it and post again in the morning (UK Time) – Andy Oct 30 '13 at 17:33

score 1 · Answer 2 · answered Jul 30 '18 at 07:33

I added the above line in print.css:

.list {
    display: inline;
}

and also did the following:

<div id="div0" class="collapse changethis">                                
<div class="panel-body" float="right" id="print_content">
<table class="table details" style="margin-left: -390px;margin-top:20px;" id="485">                                
<tbody>
<tr><th>Product name</th>                                
<th>HSN Code</th>                              
<th>Amount</th>                                
</tr>
<tr><td>Backlight Flex</td>
<td> 212223</td>
<td>5000</td>
</tr>
<tr><td>Flex Printing</td>
<td>39219090</td>
<td>900</td>
</tr>                                
</tbody>
</table>                                
</div>                                 
</div>

script

    <script>
    function print_page()
    {
         var printContents = document.getElementById("print_content").innerHTML;
         var originalContents = document.body.innerHTML;
         document.body.innerHTML = printContents;
         //expand collapsible divs
         $('div.changethis').addClass('in').css("height", "");
         window.print();
         document.body.innerHTML = originalContents;
         window.location.href = "<?php echo site_url('clients/search'); ?>";   
    }
</script>

PS- above mentioned code is only a small part of my working module, i have shown only some parts for easy readability and understandability.

The line below:

//expand collapsible divs $('div.changethis').addClass('in').css("height", "");

worked its magic.

Link to the fiddle that i referred

Printing collapsed css divs

2 Answers2