How to open multiple Accordions in print view

How to open multiple Accordions in print view

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

However it is not working and the headings are still closed in print view. Please let me know if you have additional questions.

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

  1. <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>
  2. @media print {
       #accordion {
            height: auto !important;
        }
    }