Аккордеон работает только в качестве кнопки внутри класса контейнеров, но работает, как и ожидалось, снаружи ⇐ Javascript

[Anonymous]

Я создал аккордеон из примера W3school. Он работает, как и ожидалось, когда я держу его отдельно. Но когда я ставлю его с другими входами, он работает только как кнопка. Содержание аккордеона просто вспыхнуло, когда я нажимаю кнопку аккордеона.
Мой полный код :: < /p>



Bootstrap Example







.advance-search {
background: #fff;
padding: 40px 15px 25px 15px;
border-radius: 3px;
margin-bottom: -50px;
box-shadow: -1px 3px 6px rgba(0, 0, 0, 0.12);
}

@media (min-width: 1200px) {
.container {
max-width: 1140px;

}
}

.row {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}

.align-content-center {
-ms-flex-line-pack: center !important;

align-content: center !important;

}
@media (min-width: 992px) {
.col-lg-12 {
-ms-flex: 0 0 100%;

flex: 0 0 100%;

max-width: 100%;

}
}

.form-row {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -5px;
margin-left: -5px;
}

.form-row > .col, .form-row > [class*="col-"] {
padding-right: 5px;
padding-left: 5px;
}

.form-group {
margin-bottom: 1rem;
}

.form-control {
border-radius: 2px;
height: 50px;
background-color: transparent;
color: #666;
box-shadow: none;
font-size: 15px;
}

.btn {
font-size: 15px;
letter-spacing: 1px;
display: inline-block;
padding: 15px 30px;
border-radius: 4px;
}
.w-100 {
width: 100% !important;
}
.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;
}

.active, .accordion:hover {
background-color: #ccc;
}

.panel {
padding: 0 18px;
display: none;
background-color: white;
overflow: hidden;
}




Basic Card











Category
Top rated
Lowest Price
Highest Price


Section 1

Lorem ipsum





Search Now











Section 1

Lorem ipsum





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

for (i = 0; i < acc.length; i++) {
acc.addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}





Подробнее здесь: https://stackoverflow.com/questions/796 ... s-expected