아코디언 내용 표시

Question

아코디언을 제거 할 수 있지만 특정 중단 점에서 내용을 표시 할 수 있습니까? 이 예에서는 최대 너비 1000 픽셀입니다.

http://www.w3schools.com/code/tryit.asp?filename=FAPRC04352Z8

내가 버튼을 열면

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

 
for (i = 0; i < acc.length; i++) { 
 
    acc[i].onclick = function(){ 
 
     this.classList.toggle("active"); 
 
     this.nextElementSibling.classList.toggle("show"); 
 
    } 
 
}

button.accordion { 
 
    background-color: #eee; 
 
    color: #444; 
 
    cursor: pointer; 
 
    padding: 18px; 
 
    width: 100%; 
 
    border: none; 
 
    text-align: left; 
 
    outline: none; 
 
    font-size: 15px; 
 
    transition: 0.4s; 
 
} 
 

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

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

 
div.panel.show { 
 
    opacity: 1; 
 
    max-height: 500px; 
 
} 
 

 
/* BREAK POINT WHERE ACCORDION CONTENT SHOULD SHOW AND BUTTON DISSAPEAR */ 
 
@media (min-width: 1000px) { 
 
\t button {display: none;} 
 
}

<h2>Animated Accordion</h2> 
 

 
<button class="accordion">Section 1</button> 
 
<div class="panel"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
 
</div> 
 

 
<button class="accordion">Section 2</button> 
 
<div class="panel"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
 
</div> 
 

 
<button class="accordion">Section 3</button> 
 
<div id="foo" class="panel"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
 
</div>

및 작동 창을 확장합니다.

Answer 1

올바른 길을 가고있었습니다. (단 CSS와) 당신은 또한 패널의 .show 클래스를 유지하는이 솔루션을 사용하여

@media (min-width: 1000px) { 
    button {display: none;} 
    div.panel { opacity: 1; max-height: none} 
} 

: 그냥 잠재적 패널 컨텐츠 (modified code on w3schools)를 숨길 모든 속성을 무시합니다. 따라서 창 크기를 다시 조정하면 이전에 표시된 패널이 표시되고 숨겨진 패널이 다시 숨겨집니다.