HTML JSアコーディオンが残りを崩壊させ、アクティブに警告する

Question

私は、一度に少なくとも1つのセクションが必要で、2つ以上のセクションを開くことを許さないコードを持っています。クリックすると、「アクティブなアコーディオン番号を表示」ボタンをクリックすると、セクション番号が表示されます。

誰か助けてくれますか？ https://jqueryui.com/accordion/

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

 
button.accordion:after { 
 
    content: '\002B'; 
 
    color: #777; 
 
    font-weight: bold; 
 
    float: right; 
 
    margin-left: 5px; 
 
} 
 

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

<h2>Accordion with symbols</h2> 
 
<p>In this example we have added a "plus" sign to each button. When the user clicks on the button, the "plus" sign is replaced with a "minus" sign.</p> 
 
<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 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 onclick="alert('active acoordion is:')">Show Active accordion number</button>

Answer 1

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

 
for (i = 0; i < acc.length; i++) { 
 
    acc[i].onclick = function() { 
 
    var label = this.innerHTML; 
 
    var currentClasses = this.classList.toString(); 
 
    
 
    for (j = 0; j < acc.length; j++) { 
 
     if(acc[j]!=this) 
 
      acc[j].classList = "accordion"; 
 
      acc[j].nextElementSibling.style.maxHeight = null; 
 
    } 
 
    
 
    //if(currentClasses.includes('active')) 
 
    
 
    this.classList.toggle("active"); 
 
    var panel = this.nextElementSibling; 
 
    if (panel.style.maxHeight){ 
 
     panel.style.maxHeight = null; 
 
    } else { 
 
     panel.style.maxHeight = panel.scrollHeight + "px"; 
 
    } 
 
    } 
 
} 
 

 
var btn = document.getElementsByClassName("show-current")[0]; 
 
btn.onclick = function() { 
 
    for (i = 0; i < acc.length; i++) { 
 
    var classes = acc[i].classList.toString(); 
 
    if (classes.includes('active')) 
 
     alert(acc[i].innerHTML) 
 
    } 
 
    }

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

 
button.accordion:after { 
 
    content: '\002B'; 
 
    color: #777; 
 
    font-weight: bold; 
 
    float: right; 
 
    margin-left: 5px; 
 
} 
 

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

<button class="show-current">show current section</button> 
 

 
<h2>Accordion with symbols</h2> 
 
<p>In this example we have added a "plus" sign to each button. When the user clicks on the button, the "plus" sign is replaced with a "minus" sign.</p> 
 
<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 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 2

のように動作することです

は、この情報がお役に立てば幸いです。以下のコードは、任意の時点で1つのアコーディオンだけを展開します。また、コードではシングルアコーディオンが切り替わります（セクション1をクリックする、セクション1をクリックして再びクリックすると閉じます）。

window.onload = function() { 
 
\t var acc = document.getElementsByClassName("accordion"); 
 
\t var i; 
 

 
\t for (i = 0; i < acc.length; i++) { 
 
\t \t acc[i].onclick = function (e) { 
 

 
\t \t \t [].slice.call(document.querySelectorAll(".accordion")).map(function (el) { 
 
\t \t \t \t if (el.innerHTML != e.target.innerHTML) { 
 
\t \t \t \t \t el.classList.remove("active"); 
 
\t \t \t \t \t el.nextElementSibling.style.maxHeight = null 
 
\t \t \t \t } 
 
\t \t \t }) 
 

 
\t \t \t this.classList.toggle("active"); 
 
\t \t \t var panel = this.nextElementSibling; 
 
\t \t \t if (panel.style.maxHeight) { 
 
\t \t \t \t panel.style.maxHeight = null; 
 
\t \t \t } else { 
 
\t \t \t \t panel.style.maxHeight = panel.scrollHeight + "px"; 
 
\t \t \t } 
 
\t \t } 
 
\t } 
 
} 
 

 
function showNo() { 
 
\t if (document.querySelector("button.accordion.active") != null) 
 
\t \t alert(document.querySelector("button.accordion.active").innerHTML.replace("Section ", "")) 
 
}

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

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

 
button.accordion:after { 
 
\t content: '\002B'; 
 
\t color: #777; 
 
\t font-weight: bold; 
 
\t float: right; 
 
\t margin-left: 5px; 
 
} 
 

 
button.accordion.active:after { 
 
\t content: "\2212"; 
 
} 
 

 
div.panel { 
 
\t padding: 0 18px; 
 
\t background-color: white; 
 
\t max-height: 0; 
 
\t overflow: hidden; 
 
\t transition: max-height 0.2s ease-out; 
 
}

<h2>Accordion with symbols</h2> 
 
<p>In this example we have added a "plus" sign to each button. When the user clicks on the button, the "plus" sign is replaced 
 
\t with a "minus" sign.</p> 
 
<button class="accordion">Section 1</button> 
 
<div class="panel"> 
 
\t <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna 
 
\t \t 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"> 
 
\t <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna 
 
\t \t 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 class="panel"> 
 
\t <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna 
 
\t \t aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
 
</div> 
 

 
<button id="showNo" onclick="showNo()">Show Active accordion number</button>

Answer 3

ただ、ループ内のすべてのパネルを閉じて、後に現在の1を開きます。

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

 
function closePanels() { 
 
    var panelElements = document.getElementsByClassName("panel"); 
 
    
 
    for (i = 0; i < panelElements.length; i++) { 
 
    panelElements[i].style.maxHeight = 0; 
 
} 
 
} 
 

 

 

 
for (i = 0; i < acc.length; i++) { 
 
    acc[i].onclick = function() { 
 
    // close all panels 
 
    closePanels(); 
 
    
 
    // open current panel 
 
    this.classList.toggle("active"); 
 
    
 
    var panel = this.nextElementSibling; 
 
    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; 
 
} 
 

 
button.accordion:after { 
 
    content: '\002B'; 
 
    color: #777; 
 
    font-weight: bold; 
 
    float: right; 
 
    margin-left: 5px; 
 
} 
 

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

<h2>Accordion with symbols</h2> 
 
<p>In this example we have added a "plus" sign to each button. When the user clicks on the button, the "plus" sign is replaced with a "minus" sign.</p> 
 
<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 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 4

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

 
for (i = 0; i < acc.length; i++) { 
 
    acc[i].onclick = function() { 
 
    
 
    for (var j= 0; j< acc.length; j++){ 
 
     acc[j].classList.remove('active'); 
 
     acc[j].nextElementSibling.style.maxHeight = null; 
 
     
 
    } 
 
    
 
    this.classList.add("active"); 
 
    var panel = this.nextElementSibling; 
 
    if (panel.style.maxHeight){ 
 
     panel.style.maxHeight = null; 
 
    } else { 
 
     panel.style.maxHeight = panel.scrollHeight + "px"; 
 
    } 
 
    } 
 
} 
 

 
function showActive(){ 
 
    for (var j= 0; j< acc.length; j++){ 
 
     
 
     if(acc[j].className.indexOf('active') != -1){ 
 
      alert(acc[j].innerHTML); 
 
     } 
 
    } 
 
}

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

 
button.accordion:after { 
 
    content: '\002B'; 
 
    color: #777; 
 
    font-weight: bold; 
 
    float: right; 
 
    margin-left: 5px; 
 
} 
 

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

<h2>Accordion with symbols</h2> 
 
<p>In this example we have added a "plus" sign to each button. When the user clicks on the button, the "plus" sign is replaced with a "minus" sign.</p> 
 
<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 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 onclick="showActive()">Show Active accordion number</button>