Home>
How to make it so that when you click on the first circle, the first .description-sector-two__items opens under the first circle, and so with everyone, the block opens exactly under the circle that was clicked on and closes when you click back. Thank you. https://jsfiddle.net/5e1z9rpk/28/
let model= document.querySelector('.sector-two__scene.container')
model.addEventListener('click', (e)=> {
let modelSectors= document.querySelectorAll('.description-sector-two__items')
let sectorNumb= +e.target.parentNode.getAttribute('data-id')
if (sectorNumb== 0) return false;
modelSectors.forEach((sector)=> {
sector.classList.remove('_active')
})
modelSectors[sectorNumb -1].classList.add('_active')
})
.sector-two__scene{
display:flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.sector-two__circle{
cursor: pointer;
border-radius: 50%
width: 100px
height: 100px;
background: red;
margin: 0px 0px 10px 0px;
}
.sector-two__description{
display:flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.description-sector-two__items{
display: none;
}
.description-sector-two__items._active{
width: 100%
height: 30px;
text-align: center;
display:flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #ffffff;
background: #161616;
margin: 0px 0px 10px 0px;
}
<div class="sector-two__scene container"> <div data-id="1" class="sector-two__circle circle_1"></div> <div data-id="2" class="sector-two__circle circle_2"></div> <div data-id="3" class="sector-two__circle circle_3"></div></div><div class="sector-two__description description-sector-two"> <div class="description-sector-two__items"> some text
</div> <div class="description-sector-two__items"> some text
</div> <div class="description-sector-two__items"> some text
</div></div>
-
Answer # 1
Related questions
- javascript : Block scrolling by clicking on the arrows
- javascript : Console gives error "Uncaught TypeError: Cannot read properties of null (reading 'style')" [duplicate]
- javascript : How to change the color of the scale in the video?
- javascript : html css + js how to position two charts (Chart_js) side by side rather than one below the other
- javascript : How to highlight one whole line in long HTML text
- javascript : How to emulate safari browser on windows
- javascript : Console throws an error: Uncaught TypeError: Cannot set properties of null (setting 'src')
- javascript : Why won't the animation start?
- javascript : Dropdown menu on click
- javascript : Wrong handler in JS media requests
Corrected the Html code a little, so that the containers with the text are displayed under the activation elements.