Мне нужна помощь с закрытием других панелей, когда я открываю щелчок на другой панели.Я пытался обдумать это на прошлой неделе, но я просто не в состоянии.
Я не хочу использовать библиотеку jquery, я хочу иметь возможность кодировать этот код непосредственно на моем веб-сайте.
Я думаю, что необходимый код javascript прост в концепции, но труднопиши для кого-то вроде меня.Я до сих пор не совсем понимаю, как работают команды, функции и т. Д. JavaScript.
Любая помощь или руководство приветствуются!
Вот мой код:
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="accordion.css">
</head>
<body>
<h3 class="accordion">Basics of Sailing</h3>
<div class="panel">
<div class="col col-4 middle">
<!-- <div class="space"></div> -->
<h4>Before Choosing a Sailboat</h4>
<p>Before looking for a boat to buy, you need to first know what you want to do with the boat, whether that is to go on vacation, learn how to sail, competitions or recreational sailing.</p>
</div>
<div class="col col-4 middle">
<!-- <div class="space"></div> -->
<h4>Car Topping & Trailing</h4>
<p>It's a good practice to carry the boat upside-down to allow the sides to rest on the side of the roof racks and to prevent the hull from getting damaged.</p>
</div>
<div class="col col-4 middle">
<!-- <div class="space"></div> -->
<h4>Safety Equipment</h4>
<p>You have to always have to think: safety first. Sailing is a dangerous and could result in severe injuries or death if the proper precautions are not taken.</p>
</div>
</div>
<h3 class="accordion">Basics of Sailing</h3>
<div class="panel">
<div class="col col-4 middle">
<!-- <div class="space"></div> -->
<h4>Before Choosing a Sailboat</h4>
<p>Before looking for a boat to buy, you need to first know what you want to do with the boat, whether that is to go on vacation, learn how to sail, competitions or recreational sailing.</p>
</div>
<div class="col col-4 middle">
<!-- <div class="space"></div> -->
<h4>Car Topping & Trailing</h4>
<p>It's a good practice to carry the boat upside-down to allow the sides to rest on the side of the roof racks and to prevent the hull from getting damaged.</p>
</div>
<div class="col col-4 middle">
<!-- <div class="space"></div> -->
<h4>Safety Equipment</h4>
<p>You have to always have to think: safety first. Sailing is a dangerous and could result in severe injuries or death if the proper precautions are not taken.</p>
</div>
</div>
<script src="accordion.js"></script>
</body>
</html>
CSS
.accordion {
background-color: #2364aa;
color: #ffffff;
cursor: pointer;
padding: 18px;
border: none;
text-align: left;
outline: none;
font-size: 21px;
transition: 0.4s;
}
.open, .accordion:hover {
background-color: #205A99;
}
.accordion:after {
content: '\f067';
font-family: "Font Awesome 5 Free";
color: #ffffff;
float: right;
font-size: 1.25em;
line-height: 25px;
}
.open:after {
content: "\2212";
}
.panel {
max-height: 0;
overflow: hidden;
transition: 0.2s ease-out;
}
.panel-body {
padding: 18px 0;
}
@media only screen and (min-width: 960px) {
.container {
display: table;
box-sizing: border-box;
}
.row .col {
margin: 10px 0;
}
.col {
display: table-cell;
}
.col.middle {
vertical-align: middle;
}
.col-2 {
width: 50%;
padding-right: 72px;
}
.col-4 {
width: 33.33333333333333333%;
padding-right: 72px;
}
}
Javascript
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.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}