Akkordeon funktioniert nur als Knopf innerhalb der Containerklasse, aber wie erwartet draußen erwartet ⇐ HTML

[Anonymous]

Ich habe ein Akkordeon aus dem W3 -School -Beispiel erstellt. Es funktioniert wie erwartet, wenn ich es getrennt halte. Aber wenn ich es mit anderen Eingängen platziere, funktioniert es nur als Taste. Der Inhalt des Akkordeons wird gerade geblitzt, wenn ich auf die Akkordeon -Schaltfläche klicke.

Code: Select all

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[i].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";
}
});
}