アコーディオン内のアコーディオン

私は別のアコーディオン内にアコーディオンを埋め込もうとしていますが、動作していません。埋め込まれたアコーディオンは最初のアコーディオンのサイズに拡大されます。コンテンツを表示するには余分なスペースを追加する必要があります助けが大変ありがとう！アコーディオン内のアコーディオン

CSS

button.accordion { 
background-color: #73560b; 
border: 2px solid #ffc600; 
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: #926c0e; 
} 

button.accordion:after { 
content: '\002B'; 
color: #ffc600; 
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">Background</button> 
<div class="panel"> 
content 
<button class="accordion">item 1</button> 
<div class="panel"> 
content 
</div> 
</div>

はJavaScript

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"; 
} 
} 
}

出典

2017-07-28 nsic

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.display === "block") { 
 
      panel.style.display = "none"; 
 
     } else { 
 
      panel.style.display = "block"; 
 
     } 
 
    } 
 
}

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; 
 
    display: none; 
 
    background-color: white; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
</head> 
 
<body> 
 

 
<h2>Accordion</h2> 
 

 

 

 
<button class="accordion">Section 2</button> 
 
<div class="panel"> 
 
    <button class="accordion">Section 1</button> 
 
<div class="panel"> 
 
<p> 
 
content 
 
</p> 
 
</div> 
 
</div> 
 

 
<button class="accordion">Section 3</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> 
 

 

 
</body> 
 
</html>

これを試してください

出典

2017-07-28 05:33:25 Jok3r

良い仕事、ありがとう – nsic

アコーディオン内のアコーディオン

答えて

関連する問題