Issue
I'm designing an Instagram clone. I had a problem with the story feature. When the story opened, I made the lines above. These lines are made up of divs. They all have a common class. I made this for CSS design. But I made an active id that won't happen to all of them.
Those with active id will be white and their opacity will be 1. Those who do not have this id will have an opacity of 0.5
It works when you assign a single id. But when I assign the second id, only the first one works.
const active = document.getElementById("active");
active.style.backgroundColor = "white";
active.style.opacity = 1;
.flex-container {
display: flex;
flex-direction: row;
}
.flex-container-item {
background-color: rgb(255, 255, 255);
opacity: 0.5;
padding: 1px;
flex: 1pt;
margin-right: 5px;
}
<div class="flex-container">
<div class="flex-container-item" id="active">A</div>
<div class="flex-container-item">B</div>
<div class="flex-container-item">C</div>
<div class="flex-container-item">D</div>
</div>
Solution
You cant have multiple same ids because id should be unique, instead make active css class e.g.
.active {
background-color: white;
opacity: 1;
}
and then conditionally apply this class to your divs that you want to activate
Answered By - ognjenj
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.