내 아코디언이 열리지 않는 이유

여기에서 예를 들어 http://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_accordion 처음에는 아코디언을 열어서 w3-show 스타일을 클래스에 추가했지만 왜 작동하지 않는지 알고 싶습니다.내 아코디언이 열리지 않는 이유

<!DOCTYPE html> 
<html> 
<title>W3.CSS</title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> 
<body> 

<div class="w3-container"> 
<h2>Accordions</h2> 
<p>An accordion is used to show (and hide) content that is broken into sections:</p> 

<div class="w3-accordion w3-light-grey"> 
    <button onclick="myFunction('Demo1')" class="w3-btn-block w3-left-align w3-show">Open Section 1</button> 
    <div id="Demo1" class="w3-accordion-content w3-container"> 
    <h4>Section 1</h4> 
    <p>Some text..</p> 
    </div> 
    <button onclick="myFunction('Demo2')" class="w3-btn-block w3-left-align w3-show">Open Section 2</button> 
    <div id="Demo2" class="w3-accordion-content w3-container"> 
    <h4>Section 2</h4> 
    <p>Some other text..</p> 
    </div> 
</div> 
</div> 

<script> 
function myFunction(id) { 
    var x = document.getElementById(id); 
    if (x.className.indexOf("w3-show") == -1) { 
     x.className += " w3-show"; 
    } else { 
     x.className = x.className.replace(" w3-show", ""); 
    } 
} 
</script> 

</body> 
</html>

출처

2017-01-07 user310291

귀하의 W3 쇼 클래스는 컨테이너 같은 Demo2 및 데모 1에 있어야한다

<button onclick="myFunction('Demo2')" class="w3-btn-block w3-left-align">Open Section 2</button> 
<div id="Demo2" class="w3-accordion-content w3-container w3-show">

, 당신이 볼 수있는 브라우저에서 F12와 HTML 코드를 검사하는 것을 W3 쇼 클래스 demo-div에서 토글됩니다.

출처

2017-01-07 21:12:34 Tuaafooo

w3-accordion-content 클래스의 요소에 기본적으로 w3-show 클래스를 추가 할 수 있습니다. 이 시도 :

function myFunction(id) { 
 
    var x = document.getElementById(id); 
 
    if (x.className.indexOf("w3-show") == -1) { 
 
    x.className += " w3-show"; 
 
    } else { 
 
    x.className = x.className.replace(" w3-show", ""); 
 
    } 
 
}

<link href="http://www.w3schools.com/lib/w3.css" rel="stylesheet"/> 
 
<div class="w3-container"> 
 
    <h2>Accordions</h2> 
 
    <p>An accordion is used to show (and hide) content that is broken into sections:</p> 
 

 
    <div class="w3-accordion w3-light-grey"> 
 
    <button onclick="myFunction('Demo1')" class="w3-btn-block w3-left-align">Open Section 1</button> 
 
    <div id="Demo1" class="w3-accordion-content w3-container w3-show"> 
 
     <h4>Section 1</h4> 
 
     <p>Some text..</p> 
 
    </div> 
 
    <button onclick="myFunction('Demo2')" class="w3-btn-block w3-left-align ">Open Section 2</button> 
 
    <div id="Demo2" class="w3-accordion-content w3-container w3-show"> 
 
     <h4>Section 2</h4> 
 
     <p>Some other text..</p> 
 
    </div> 
 
    </div> 
 
</div>

출처

2017-01-07 21:13:32 Ionut

내 아코디언이 열리지 않는 이유

답변

관련 문제