0
私は自分のウェブサイトで使用するためにアコーディオンを作成しようとしていますが、私は2つのことを達成しようとしています:どのようにして、アコーディオンにサブセクションを追加し、いつでも1つのセクションを折りたたむことができますか?
1)1つのセクションをいつでも展開することができます。 「紹介」が展開されている場合は、「得意先」または「商業」セクションを選択すると折りたたまれます。
これを達成するには、何をjavascriptに追加する必要がありますか?
2)どのように私はサブセクションを作成するのです
など「お客様」のセクション私は「1号機」と呼ばれる他の折りたたみ可能なセクションを追加しようとしています、「2号機」、「3号機」の中で?上記のお手伝いをいただければ幸いです。私はあなたが私たちが助けることができる前に、2番目の質問の試みをする必要があると思うので、
おかげで、 フランク
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";
}
}
}
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: max-height 0.2s ease-out;
}
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<h2>Frank's Accordion</h2>
<p>Select a section..</p>
<button class="accordion">Introduction</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">Customers</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">Commercial</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>
<script>
</script>
</body>
</html>
こんにちはフランク、これはおそらく二つの質問であるべきであり、最低でも、あなたは、サブセクションを作成する試みをした私たちを表示する必要があります。 –