どのようにして、アコーディオンにサブセクションを追加し、いつでも1つのセクションを折りたたむことができますか？

私は自分のウェブサイトで使用するためにアコーディオンを作成しようとしていますが、私は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>

出典

2017-06-10 Frankwilliam

こんにちはフランク、これはおそらく二つの質問であるべきであり、最低でも、あなたは、サブセクションを作成する試みをした私たちを表示する必要があります。 –

は、私が唯一、あなたの最初の質問に答えています。

私は基本的にonClickイベントの中にもう1つのforループを追加して、いずれかのアコーディオンに「アクティブ」のクラスがあるかどうかをチェックし、それらが崩壊した場合にチェックします。私はこのコードを単純化できると思います。

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

 
// check if element has class function 
 
function hasClass(element, cls) { 
 
    return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1; 
 
} 
 

 
// accordion function 
 
function accordion(element) { 
 
    element.classList.toggle("active"); 
 
    var panel = element.nextElementSibling; 
 
    if (panel.style.maxHeight){ 
 
    panel.style.maxHeight = null; 
 
    } else { 
 
    panel.style.maxHeight = panel.scrollHeight + "px"; 
 
    } 
 
} 
 

 
for (i = 0; i < acc.length; i++) { 
 
    acc[i].onclick = function() { 
 
    var acc = document.getElementsByClassName("accordion"); 
 
    // loop through accordion elements again 
 
    for (i = 0; i < acc.length; i++) { 
 
     // check if any of the element have a class of "active" and is not the currently clicked element 
 
     if (hasClass(acc[i], "active") && acc[i] != this) { 
 
     // collapse any already opened accordions 
 
     accordion(acc[i]); 
 
     } 
 
    } 
 
    // toggle clicked accordion 
 
    accordion(this); 
 
    } 
 
}

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 v1.1</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>

出典

2017-06-10 16:59:24 WizardCoder

どのようにして、アコーディオンにサブセクションを追加し、いつでも1つのセクションを折りたたむことができますか？

答えて

関連する問題