How do I click on the circle button on the page, which is the dot in the html, to make the text appear? Can you help me with my js or give me a complete js? I don't need the jQueryj library, how do I write it in native js?
What I have tried:
<!-- 模块1 -->
<div class="box1">
<p class="checkcaption">历史查看</p>
<div class="check">
<input type="checkbox" id="switch1" name="switch1" class="switch" >
<label for="switch1"></label>
</div>
<div id="timeline">
<div class="dot" id="one">
<span></span>
<date>1280</date>
</div>
<div class="dot" id="two">
<span></span>
<date>1649</date>
</div>
<div class="dot" id="three">
<span></span>
<date>1831</date>
</div>
<div class="dot" id="four">
<span></span>
<date>1992</date>
</div>
<div class="inside"></div>
</div>
<article class='modal one'>
<date>26/06 - 1280</date>
<h2>Yo les gars</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates magnam excepturi laboriosam
minima soluta, quae. Sunt repellat totam non, et sed in veniam fuga odio eius! Nesciunt amet optio
recusandae? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum sit dolor sint amet,
corporis aperiam nihil, quas, accusantium enim suscipit rem non possimus officiis. Recusandae hic
at, fugiat eos eveniet.</p>
</article>
<article class='modal two'>
<date>08/09 - 1649</date>
<h2>Salut les louzeurs</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates magnam excepturi laboriosam
minima soluta, quae. Sunt repellat totam non, et sed in veniam fuga odio eius! Nesciunt amet optio
recusandae? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum sit dolor sint amet,
corporis aperiam nihil, quas, accusantium enim suscipit rem non possimus officiis. Recusandae hic
at, fugiat eos eveniet.</p>
</article>
<article class='modal three'>
<date>21/07 - 1831</date>
<h2>Eat 'em all !</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates magnam excepturi laboriosam
minima soluta, quae. Sunt repellat totam non, et sed in veniam fuga odio eius! Nesciunt amet optio
recusandae? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum sit dolor sint amet,
corporis aperiam nihil, quas, accusantium enim suscipit rem non possimus officiis. Recusandae hic
at, fugiat eos eveniet.</p>
</article>
<article class='modal four'>
<date>03/02 - 1992</date>
<h2>Mais pourquoi?</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates magnam excepturi laboriosam
minima soluta, quae. Sunt repellat totam non, et sed in veniam fuga odio eius! Nesciunt amet optio
recusandae? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum sit dolor sint amet,
corporis aperiam nihil, quas, accusantium enim suscipit rem non possimus officiis. Recusandae hic
at, fugiat eos eveniet.</p>
</article>
</div>
.box1{
width: 85%;
height: 550px;
background-color: pink;
margin: auto;
}
body {
font-family: arial, sans-serif;
}
.checkcaption {
text-align: center;
margin-top: 10px;
}
.check {
width: 60px;
height: 30px;
border: #222 solid 2px;
position: relative;
margin: 10px auto;
border-radius: 15px;
}
.check input {
visibility: hidden;
height: 30px;
width: 60px;
}
.check label {
display: block;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #e74c3c;
cursor: pointer;
position: absolute;
top: 18%;
left: 12%;
transition: all .3s ease;
}
.check input:checked + label {
left: 55%;
background-color: #7b3;
}
div#timeline {
background-color: #aed6f1;
margin-top: 150px;
height: 10px;
width: 100%;
position: relative;
}
div#timeline .inside {
position: absolute;
height: 4px;
background-color: #fff;
width: 0%;
top: 3px;
left: 0;
}
div#timeline .dot {
z-index: 99;
transition: 0.3s ease-in-out;
width: 40px;
height: 40px;
border-radius: 50%;
position: absolute;
top: -15px;
text-align: center;
cursor: pointer;
}
div#timeline .dot:nth-child(1) {
left: 20%;
background-color: #2c3e50;
}
div#timeline .dot:nth-child(2) {
left: 40%;
background-color: #e74c3c;
}
div#timeline .dot:nth-child(3) {
left: 60%;
background-color: #7b3;
}
div#timeline .dot:nth-child(4) {
left: 80%;
background-color: #236b8e;
}
div#timeline .dot:hover {
transform: scale(1.2);
}
div#timeline .dot date {
font-family: roboto;
font-size: 1.1rem;
display: block;
position: relative;
top: -60px;
text-align: center;
}
div#timeline .dot span {
display: inline-block;
margin-top: 10px;
width: 20px;
height: 20px;
background-color: #fff;
position: relative;
border-radius: 50%;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}
article {
display: none;
position: relative;
top: 30px;
max-width: 960px;
background-color: #fff;
padding: 20px;
margin: auto;
}
article date {
display: block;
text-align: right;
}
article h2 {
font-family: merriweather, sans-serif;
font-size: 5rem;
padding: 10px 0;
border-bottom: solid #111 2px;
margin-bottom: 20px;
}
article p {
line-height: 130%;
}
div.mask {
display: none;
left: 0;
top: 0;
position: fixed;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
z-index: 99999;
}
div.mask article {
position: relative;
top: -100%;
margin-top: 50px;
max-width: 960px;
background-color: #fff;
padding: 20px;
margin: auto;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.4);
}
div.mask article date {
display: block;
text-align: right;
}
div.mask article h2 {
font-family: merriweather, sans-serif;
font-size: 5rem;
padding: 10px 0;
border-bottom: solid #111 2px;
margin-bottom: 20px;
}
div.mask article p {
line-height: 130%;
}
JS:
const dots = document.querySelectorAll(".dot");
const switch1 = document.getElementById("switch1");
const modal = document.querySelector(".modal");
const inside = document.querySelector(".inside");
const articles = document.querySelectorAll("article");
dots.forEach((dot) => {
dot.addEventListener("click", () => {
const percent = dot.id === "one" ? "20%" :
dot.id === "two" ? "40%" :
dot.id === "three" ? "60%" :
"80%";
inside.style.width = percent;
});
});
if (!switch1.checked) {
dots.forEach((dot) => {
dot.addEventListener("click", () => {
modal.classList.add("active");
modal.classList.add(modal-`${dot.id}`);
articles.forEach((article) => {
if (article.classList.contains("modal-" + dot.id)) {
article.classList.add("active");
}
});
});
});
}
switch1.addEventListener("click", () => {
if (switch1.checked) {
modal.classList.remove("active");
modal.classList.add("nobox");
dots.forEach((dot) => {
dot.addEventListener("click", () => {
articles.forEach((article) => {
if (article.classList.contains("modal-" + dot.id)) {
article.classList.add("active");
} else {
article.classList.remove("active");
}
});
});
});
} else {
modal.classList.add("active");
modal.classList.remove("nobox");
dots.forEach((dot) => {
dot.addEventListener("click", () => {
if (switch1.checked) {
articles.forEach((article) => {
article.classList.remove("active");
});
modal.classList.remove("active");
modal.classList.add("nobox");
} else {
modal.classList.add(modal-`${dot.id}`);
articles.forEach((article) => {
if (article.classList.contains("modal-" + dot.id)) {
article.classList.add("active");
} else {
article.classList.remove("active");
}
});
}
});
});
}
});