Question

I am trying print out details from my page, using a separate CSS file. The problem I am having is displaying everything that I want to display. My web page has an accordion on it for different details and I want it to display all the relevant details from the 3 accordion boxes but it is only printing data from the currently open box. I want the data from the ‘appointment-data’ class in all sections to be visible when printing.

<div id="accordion">

    <div>
         <h3><a href="#">Section 1</a></h3>
        <div>
            <div class="appointment-image">
                <img alt="img1" src="../../Content/images/img1.jpg" />
            </div>

            <div class="appointment-data">
                <div class="display-box">
                    <div class="display-label">@Html.LabelFor(model => model.Item1)</div>
                    <div class="display-field">@Html.DisplayFor(model => model.Item1)</div>
                </div>
                <div class="display-box">
                    <div class="display-label">@Html.LabelFor(model => model.Item2)</div>
                    <div class="display-field">@Html.DisplayFor(model => model.Item2)</div>
                </div>

            </div>
        </div>
    </div>
         <h3><a href="#">Section 2</a></h3>
        <div>
            <div class="appointment-image">
                <img alt="" src="../../Content/images/img2.jpg" />
            </div>

            <div class="appointment-data">
                <div class="display-box">
                    <div class="display-label">@Html.LabelFor(model => model.Item3)</div>
                    <div class="display-field">@Html.DisplayFor(model => model.Item3)</div>
                </div>                                    
            </div>
        </div>
    </div>
    <div>
         <h3><a href="#">Section 3</a></h3>
        <div class="appointment-image">
            <img alt="" src="../../Content/images/img3.jpg" />
        </div>

        <div class="appointment-data">
            <div class="display-box">
                <div class="display-label">@Html.LabelFor(model => model.Item4)</div>
                <div class="display-field">@Html.DisplayFor(model => model.Item4)</div>
            </div>                                    
        </div>
    </div>

</div>

As it’s an accordion, only one section is visible at a time and I would rather use CSS and HTML than jQuery/JavaScript. The accordion is done using jQuery.

Answer 1

I was having the same problem and I found the solution, give “id” for your each div, let’s assume “divAccordion1, divAccordion2, divAccordion3” respectively. The following works for my case, it’ll open up all three accordions and print the content.

<style type="text/css">
@media print{
#divAccordion1 {display: block !important;}
#divAccordion2 {display: block !important;}
#divAccordion3 {display: block !important;}
}
</style>