<html lang="en">
<head>
<meta charset="UTF-8">
<title>Я учу JS</title>
</head>
<body>
<div class="divClass divHide">Див 1</div>
<input type="button" class="buttons" related='0' value="Продолжить...">
<div class="divClass divHide">Див 2</div>
<input type="button" class="buttons" related='1' value="Продолжить...">
<div class="divClass divHide">Див 3</div>
<input type="button" class="buttons" related='2' value="Продолжить...">
</body>
</html>
.divHide {
display: none;
}
const divClass = document.getElementsByClassName("divClass");
Array.from(document.getElementsByClassName("buttons")).forEach(function(
button
) {
button.addEventListener("click", function() {
divClass[this.getAttribute("related")].classList.toggle("divHide");
this.value = this.value === "Свернуть" ? "Продолжить" : "Свернуть";
});
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.