모두를 위해 아코디언 인쇄/모두 인쇄

Question

아코디언 기능이있는 페이지를 함께 넣었으므로 페이지가 너무 길지 않아서 이제는 페이지를 인쇄 할 때 열리는 섹션 만 인쇄됩니다. 모든 버튼을 열거 나 모든 버튼을 인쇄하여 어떤 도움이라도 대단히 감사합니다!

누군가 도와주세요.

CSS

button.accordion { 
    background-color: #13294b; 
    border: 2px solid #59cbe8; 
    border-radius: 0px 10px 0px 10px; 
    box-shadow: 7px 7px 5px #cccccc; 
    color: #fff; 
    cursor: pointer; 
    padding: 10px 15px 10px 15px; 
    margin: 4px 0px 7px 0px; 
    width: 100%; 
    font-size: 18px; 
    transition: 0.4s; 
    outline: none; 
    text-align: left; 
} 

button.accordion.active, button.accordion:hover { 
    background-color: #1f447b; 
} 

button.accordion:after { 
    content: '\002B'; 
    color: #59cbe8; 
    font-weight: bold; 
    float: right; 
} 

button.accordion.active:after { 
    content: "\2212"; 
} 

div.panel { 
    padding: 0 18px; 
    background-color: white; 
    max-height: 0; 
    overflow: hidden; 
    transition: max-height 0.2s ease-out; 
} 

HTML은

<button class="accordion">Title 1</button> 
<div class="panel">content</div> 

<button class="accordion">Title 2</button> 
<div class="panel">content</div> 

스크립트

var acc = document.getElementsByClassName("accordion"); 
var i; 

for (i = 0; i < acc.length; i++) { 
    acc[i].onclick = function() { 
    this.classList.toggle("active"); 
    var panel = this.nextElementSibling; 
    if (panel.style.maxHeight){ 
     panel.style.maxHeight = null; 
    } else { 
     panel.style.maxHeight = panel.scrollHeight + "px"; 
    } 
    } 
} 

Answer 1

는 미디어 쿼리 인쇄 https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries를 사용합니다.

.accordion .collapsed { 
 
    height: 0; 
 
    overflow: hidden; 
 
} 
 

 
@media print { 
 
    .accordion .collapsed { 
 
     height: auto; 
 
    } 
 
}

<ul class="accordion"> 
 
    <li class="collapsed">this is hidden</li> 
 
    <li class="collapsed">this is hidden</li> 
 
    <li>this is not hidden</li> 
 
    <li class="collapsed">this is hidden</li> 
 
    <li class="collapsed">this is hidden</li> 
 
    <li class="collapsed">this is hidden</li> 
 
</ul> 
 

 
<button onclick="window.print()">Print</button>