ecki/JavaScript-from-Beginner-to-Professional
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Project 1

Browse Source
This commit is contained in:
Karan 2021-11-24 22:52:58 +05:30 committed by GitHub
parent b40f1fa9dc
commit d05cedb985
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 45 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
Chapter 10/Project 1 Normal file
View File

@ -0,0 +1,45 @@
<!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>