Home>

javascript : How to make the block open under the block that was clicked on?

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>
javascript html css
  • Answer # 1

    Corrected the Html code a little, so that the containers with the text are displayed under the activation elements.

    const sectorsList= document.querySelectorAll('.sector-two__circle');
if(sectorsList.length > 0){
  for(var index= 0; index < sectorsList.length; index++){
    const sectors= sectorsList[index];
    sector.addEventListener('click', function(e){
      const sectorName= sector.getAttribute('href').replace('#', '');
      const currentSector= document.getElementById(sectorName);
      sectorOpen(currentSector);
      e.preventDefault();
    });
  }
}
function sectorOpen(currentSector){
  if(!currentSector){
    return;
  }
  if(currentSector.classList.contains('open')){
    currentSector.classList.remove('open');
  }else{
    currentSector.classList.add('open');
  }
}
    .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.open{
    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__description description-sector-two">    <a href="#sector_1" class="sector-two__circle circle_1"></a>    <div id="sector_1" class="description-sector-two__items">     some text
    </div>    <a href="#sector_2" class="sector-two__circle circle_2"></a>    <div id="sector_2" class="description-sector-two__items">     some text
    </div>    <a href="#sector_3" class="sector-two__circle circle_3"></a>    <div id="sector_3" class="description-sector-two__items">     some text
    </div></div>