Printing a page with closed accordions

I’m trying to get a page that has some accordions on it. (not the musical instruments, although that would fun.) The issue I’m running into is that if someone just uses the browser print option, it doesn’t print any closed accordion content and it prints all the url links through out the page. I’m pretty new to foundation. Not sure how to implement a print button on the page either.
Using foundation 6.
Here’s the basics of what I’ve done:

<link rel="stylesheet" href="https://use.typekit.net/yql0phm.css">
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.0/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.0/slick/slick-theme.css"/>
<link rel="stylesheet" href="assets/css/app.css">
<script defer src="https://use.fontawesome.com/releases/v5.8.2/js/all.js" integrity="sha384-DJ25uNYET2XCl5ZF++U8eNxPWqcKohUUBUpKGlNLMchM7q4Wjg2CUpjHLaL8yYPH" crossorigin="anonymous"></script>

Coming Soon for January

  • Fiction
    <div class="accordion-content" data-tab-content="true">
    <div class="grid-x grid-padding-x">
    <div class="small-12 large-5">
    <p><strong>Allende, Isabel</strong></p>
    </div>
    
    <div class="small-12 large-7">
    <p><a aria-label="" data-linktype="EXTERNAL" data-newwindow="true" data-showtoolbar="true" href="http://url.com">A Long Petal of the Sea</a></p>
    </div>
    </div>
    </div>
    
  • Non Fiction
    <div class="accordion-content" data-tab-content="true">
    <div class="grid-x grid-padding-x">
    <div class="small-12 large-5">
    <p><strong>Barr, John</strong></p>
    </div>
    
    <div class="small-12 large-7">
    <p><a aria-label="" data-linktype="EXTERNAL" data-newwindow="true" data-showtoolbar="true" href="http://url.com">Start By Believing</a></p>
    </div>
    </div>
    </div>
    

You can write a print mediaquery which results in they are opened. In the devtools of your browser you can emulate it to see what will be printed.