locked
How to open accordions in print view RRS feed

  • Question

  • User-1025482824 posted

    I am currently trying to use this CSS to display accordion style column/headings as "open" when in print view. 

    @media print {
        .panel-collapse,
        .panel-collapse .collapse {
            height: auto !important;
            display:block;
        }
    }

    However it is not working and the headings are still closed. 

    in print view. 

    here is the html:

    <div id="accordion">
        <div class="card">
            <div class="card-header" id="aheading">
                <h5 class="mb-0">
                    <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                        Marginal items
                    </button>
                </h5>
            </div>
    
            <div id="collapseOne" class="collapse" aria-labelledby="aheading" data-parent="#accordion"> 
                <div class="card-body">
                    <ul class="list-group list-group-flush">
                        @foreach (var item in Model.marginalParts)
                        {
                            <li class="list-group-item">@marginalproduct</li>
                        }
                    </ul>
                </div>
            </div>
        </div>

    Here is another person's example of the goal Im trying to reach. 

    The first picture is before:

    before

    and second is end goal for print view:

    end goal

    Any advice or tips are welcome

    Thursday, June 21, 2018 9:19 PM

All replies

  • User36583972 posted


    Hi ruby888,

    Do you use the JQuery Accordion? I did not find an API that could be expanded before printing preview.

    You maybe can use multiple accordion div each representing one anchor tag like:

     <div class="accordion">
            <h3><a href="#">First</a></h3>
            <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
        </div>
        <div class="accordion">
            <h3><a href="#">Second</a></h3>
            <div>Phasellus mattis tincidunt nibh.</div>
        </div>
        <div class="accordion">
            <h3><a href="#">Third</a></h3>
            <div>Nam dui erat, auctor a, dignissim quis.</div>
        </div>
    

    Then, open the multiple accordion before you printing preview.


    Best Regards,

    Yong Lu

    Friday, June 22, 2018 10:29 AM