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

    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>