Issue
I have created custom radio buttons using HTML, CSS, JS.
Now, it can pick multiple choices at one time like 2, 3, or 4 choices. What I want to do is to only pick one choice at a time.
And, I want to know if there is a way, instead of adding multiple ::after
with the same values for all div
s, can I add one ::after
for all 4 div
s.
let mainBtns = document.querySelectorAll('#container');
mainBtns.forEach(btn => {
btn.addEventListener('click', () => {
btn.classList.toggle('active');
});
});
.main {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
gap: 20px;
}
.first, .second, .third, .forth {
display: flex;
place-content: center;
place-items: center;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: rgb(202, 202, 202);
cursor: pointer;
position: relative;
box-shadow: 0 0 6px 1px #e8eef6;
}
.first::after {
content: '';
height: 70px;
width: 70px;
border-radius: 50%;
background-color: rgb(78, 78, 78);
position: absolute;
vertical-align: middle;
visibility: hidden;
}
.second::after {
content: '';
height: 70px;
width: 70px;
border-radius: 50%;
background-color: rgb(78, 78, 78);
position: absolute;
visibility: hidden;
}
.third::after {
content: '';
height: 70px;
width: 70px;
border-radius: 50%;
background-color: rgb(78, 78, 78);
position: absolute;
visibility: hidden;
}
.forth::after {
content: '';
height: 70px;
width: 70px;
border-radius: 50%;
background-color: rgb(78, 78, 78);
position: absolute;
visibility: hidden;
}
.active::after {
visibility: visible;
}
.deActive::after {
visibility: hidden;
}
<div class="main">
<div id="container" class="first"></div>
<div id="container" class="second"></div>
<div id="container" class="third"></div>
<div id="container" class="forth"></div>
</div>
Solution
To avoid repeating ::after for each button you can use element > element selector;
And for picking one choice at a time, you need to reset the class name of the buttons (remove active class name from all buttons) then add active to the selected one
const mainBtns = document.querySelectorAll(".btn");
mainBtns.forEach(btn => {
btn.addEventListener("click", () => {
if (btn.classList.contains("active")) return btn.classList.remove("active");
mainBtns.forEach(btn => (btn.className = "btn"));
btn.classList.add("active");
});
});
.main {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
gap: 20px;
}
.main>div {
display: flex;
place-content: center;
place-items: center;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: rgb(202, 202, 202);
cursor: pointer;
position: relative;
box-shadow: 0 0 6px 1px #e8eef6;
}
.main>div::after {
content: "";
height: 70px;
width: 70px;
border-radius: 50%;
background-color: rgb(78, 78, 78);
position: absolute;
vertical-align: middle;
visibility: hidden;
}
.main>.active::after {
visibility: visible;
}
<div class="main">
<div class="btn"></div>
<div class="btn"></div>
<div class="btn"></div>
<div class="btn"></div>
</div>
Answered By - Alireza
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.