51 lines
1.2 KiB
Plaintext
51 lines
1.2 KiB
Plaintext
<!doctype html>
|
|
<html>
|
|
|
|
<head>
|
|
<title>JS Tester</title>
|
|
<style>
|
|
.active {
|
|
display: block !important;
|
|
}
|
|
|
|
.myText {
|
|
display: none;
|
|
}
|
|
|
|
.title {
|
|
font-size: 1.5em;
|
|
background-color: #ddd;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container">
|
|
<div class="title">Title #1</div>
|
|
<div class="myText">Just some text #1</div>
|
|
<div class="title">Title #2</div>
|
|
<div class="myText">Just some text #2</div>
|
|
<div class="title">Title #3</div>
|
|
<div class="myText">Just some text #3</div>
|
|
</div>
|
|
<script>
|
|
const menus = document.querySelectorAll('.title');
|
|
const openText = document.querySelectorAll('.myText');
|
|
|
|
menus.forEach((el) => {
|
|
el.addEventListener('click', (e) => {
|
|
console.log(el.nextElementSibling);
|
|
remover();
|
|
el.nextElementSibling.classList.toggle('active');
|
|
})
|
|
})
|
|
|
|
function remover() {
|
|
openText.forEach((ele) => {
|
|
ele.classList.remove('active');
|
|
})
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|