Как переключить несколько div с эффектом defferent на каждый div

Question

У меня несколько делений, у каждого своя позиция.я хочу переключать каждый div при нажатии на текст внутри div. Я новичок в Javascript, поэтому, пожалуйста, потерпите меня.Я знаю, как это сделать, просто переключая один div, как я делал ниже.

var para = document.querySelectorAll('.wrap div p');
      for (var i = 0; i < para.length; i++) {
          para[i].addEventListener('click', expand);
      }

      function expand(e) {
       if ((e.target === para[2]) && (document.querySelector('.wrap #three').style.width === '15%')) {
             document.querySelector('.wrap #three').style.width = '100%';
           }else{
             document.querySelector('.wrap #three').style.width = '15%';

           }
       }

Я также пытался использовать оператор if else, но он просто расширяет div, я не мог сжать его обратно в его положение ..Я знаю, что есть простой способ добиться этого, но я не мог понять.

var para = document.querySelectorAll('.wrap div p');
for (var i = 0; i < para.length; i++) {
  para[i].addEventListener('click', expand);
}

function expand(e) {
  if (e.target === para[0]) {
    document.querySelector('.wrap #one').style.width = '100%';
  } else if (e.target === para[1]) {
    document.querySelector('.wrap #two').style.width = '100%';

  } else if (e.target === para[2]) {
    document.querySelector('.wrap #three').style.width = '100%';

  } else if (e.target === para[3]) {
    document.querySelector('.wrap #four').style.width = '100%';

  } else if (e.target === para[4]) {
    document.querySelector('.wrap #five').style.width = '100%';

  } else if (e.target === para[5]) {
    document.querySelector('.wrap #six').style.width = '100%';

  } else if (e.target === para[6]) {
    document.querySelector('.wrap #seven').style.width = '100%';

  }
}

.wrap {
  position: relative;
  width: 100%;
  height: 100vh;
  background: white;
  display: flex;
  flex-direction: row;
}

.wrap div {
  position: relative;
  height: 100%;
  overflow: hidden;
  background: #fdfdfd;
  transition: 0.2s ease-in;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.7);
}

.wrap div:before {
  content: '';
  position: absolute;
  width: 250px;
  height: 250px;
  right: -150px;
  top: 27%;
  background: red;
  border-radius: 50%;
  cursor: pointer;
}

.wrap p {
  position: absolute;
  top: 40%;
  cursor: pointer;
  transform: rotate(-90deg);
  font-size: 25px;
  font-weight: bold;
  color: white;
  font-family: 'Halvetica', sans-serif;
}

.wrap #one {
  position: absolute;
  width: 21%;
}

.wrap #one:before {
  background: #FF1D55;
}

.wrap #one p {
  right: -8px;
}

.wrap #two {
  position: absolute;
  width: 18%;
}

.wrap #two:before {
  background: #FFE31A;
}

.wrap #two p {
  right: -23px;
}

.wrap #three {
  position: absolute;
  width: 15%;
}

.wrap #three:before {
  background: #00E2AA;
}

.wrap #three p {
  right: 2px;
}

.wrap #four {
  position: absolute;
  width: 12%;
}

.wrap #four:before {
  background: #B90CB4;
}

.wrap #four p {
  right: -13px;
}

.wrap #five {
  position: absolute;
  width: 9%;
}

.wrap #five:before {
  background: #FF3400;
}

.wrap #five p {
  right: -5px;
}

.wrap #six {
  position: absolute;
  width: 6%;
}

.wrap #six:before {
  background: #30B7E2;
}

.wrap #six p {
  right: -18px;
}

.wrap #seven {
  position: absolute;
  width: 3%;
}

.wrap #seven:before {
  background: #220054;
}

.wrap #seven p {
  right: -12px;
}

<div class="wrap">
  <div id="one">
    <p>About</p>
  </div>
  <div id="two">
    <p>Services</p>
  </div>
  <div id="three">
    <p>Blog</p>
  </div>
  <div id="four">
    <p>Follow</p>
  </div>
  <div id="five">
    <p>Team</p>
  </div>
  <div id="six">
    <p>Contact</p>
  </div>
  <div id="seven">
    <p>History</p>
  </div>
</div>

Надеюсь, я все объясню ясно.любая помощь будет принята с благодарностью

Answer 1

Используйте classList.add/remove вместо добавления встроенного стиля через JavaScript.В вашем коде вы прикрепляете событие к p, которое занимает очень маленькую область, я добавил класс p, чтобы его фон был виден и его было легко щелкнуть.

Также вы ненужно нацелиться на каждый элемент и добавить к нему класс.

В этом примере получить целевой элемент и его родительский элемент и toggle class

var para = document.querySelectorAll('.wrap div p');
for (let i = 0; i < para.length; i++) {

  para[i].addEventListener('click', expand);
}

function expand(e) {

  if (e.target.parentNode.classList.contains('fullWidth')) {
    e.target.parentNode.classList.remove('fullWidth')
  } else {
    e.target.parentNode.classList.add('fullWidth')
  }

}

.wrap {
  position: relative;
  width: 100%;
  height: 100vh;
  background: white;
  display: flex;
  flex-direction: row;
}

.wrap div {
  position: relative;
  height: 100%;
  overflow: hidden;
  background: #fdfdfd;
  transition: 0.2s ease-in;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.7);
}

.wrap div:before {
  content: '';
  position: absolute;
  width: 250px;
  height: 250px;
  right: -150px;
  top: 27%;
  background: red;
  border-radius: 50%;
  cursor: pointer;
}

.wrap p {
  position: absolute;
  top: 40%;
  cursor: pointer;
  transform: rotate(-90deg);
  font-size: 25px;
  font-weight: bold;
  color: white;
  font-family: 'Halvetica', sans-serif;
}

.wrap #one {
  position: absolute;
  width: 21%;
}

.wrap #one:before {
  background: #FF1D55;
}

.wrap #one p {
  right: -8px;
}

.wrap #two {
  position: absolute;
  width: 18%;
}

.wrap #two:before {
  background: #FFE31A;
}

.wrap #two p {
  right: -23px;
}

.wrap #three {
  position: absolute;
  width: 15%;
}

.wrap #three:before {
  background: #00E2AA;
}

.wrap #three p {
  right: 2px;
}

.wrap #four {
  position: absolute;
  width: 12%;
}

.wrap #four:before {
  background: #B90CB4;
}

.wrap #four p {
  right: -13px;
}

.wrap #five {
  position: absolute;
  width: 9%;
}

.wrap #five:before {
  background: #FF3400;
}

.wrap #five p {
  right: -5px;
}

.wrap #six {
  position: absolute;
  width: 6%;
}

.wrap #six:before {
  background: #30B7E2;
}

.wrap #six p {
  right: -18px;
}

.wrap #seven {
  position: absolute;
  width: 3%;
}

.wrap #seven:before {
  background: #220054;
}

.wrap #seven p {
  right: -12px;
}

p {
  background: greenyellow
}

.fullWidth {
  width: 100% !important;
}

<div class="wrap">
  <div id="one">
    <p>About</p>
  </div>
  <div id="two">
    <p>Services</p>
  </div>
  <div id="three">
    <p>Blog</p>
  </div>
  <div id="four">
    <p>Follow</p>
  </div>
  <div id="five">
    <p>Team</p>
  </div>
  <div id="six">
    <p>Contact</p>
  </div>
  <div id="seven">
    <p>History</p>
  </div>
</div>