Как показать блоки по отдельности

286

02 марта 2018, 19:25

Имеется раздел с 3-я блоками (каждый блок состоит из заголовка и текста(текст скрывается классом), как можно сделать так, что бы при нажатии на заголовок удалялся класс и показывался только текст в одном блоке, а не во всех как у меня. В js очень слаб реализовал так:

var caption = document.querySelectorAll(".mywork__caption"); 
var discription = document.querySelectorAll(".mywork__description"); 
 
if (discription) { 
  for (var i = 0; i < discription.length; i++) { 
    discription[i].classList.add("mywork__description--close"); 
  } 
}; 
 
 
for (var i = 0; i < caption.length; i++) { 
  caption[i].addEventListener("click", function() { 
    for (var i = 0; i < discription.length; i++) { 
      discription[i].classList.remove("mywork__description--close"); 
    } 
  }) 
}

<section class="mywork"> 
  <div class="caption"> 
    <div class="caption__left"></div> 
    <b>Мои работы</b> 
    <div class="caption__right"></div> 
  </div> 
  <div class="mywork__container"> 
    <div class="mywork__all mywork__all--mishka"> 
      <img src="img/mishka-index-desktop.jpg" alt="" height="185" width="280"> 
      <b class="mywork__caption">“Мишка”</b> 
      <div class="mywork__description"> 
        <p>Вёрстка сайта магазина “Мишка”, игрушек ручной работы</p> 
        <p>Описание выполненных работ:</p> 
        <ul> 
          <li>Вёрстка: адаптивная + резина</li> 
          <li>Использована адаптивная графика</li> 
          <li>Оптимизирована загрузка шрифтов</li> 
          <li>Оптиизация изображений под экраны с большой плотностью пикселей, а также использование новейшего формата от Google .webp, что позволяет значительно уменьшить вес изображений и следовательно увеличить скорость загрузки страниц</li> 
          <li>Оптимизированная векторная графика</li> 
          <li>Вёрстка без использования Фреймворков</li> 
          <li>Валидная вёрстка</li> 
        </ul> 
      </div> 
    </div> 
    <div class="mywork__all mywork__all--nerds"> 
      <img src="img/nerds-index.png" alt="" height="185" width="280"> 
      <b class="mywork__caption">“nerds”</b> 
      <div class="mywork__description"> 
        <p>Вёрстка сайта магазина “Nerds”, сайта по продаже шаблонов</p> 
        <p>Описание выполненых работ:</p> 
        <ul> 
          <li>Фиксированая вёрстка</li> 
          <li>Оптимизированна векторная графика</li> 
          <li>Оптимизированна растравая графика</li> 
          <li>Вёрстка без использования Фреймворков</li> 
          <li>Валидная вёрстка</li> 
        </ul> 
      </div> 
    </div> 
    <div class="mywork__all mywork__all--gllacy"> 
      <img src="img/gllacy-index-1200.png" alt="" height="185" width="280"> 
      <b class="mywork__caption">“Gllacy”</b> 
      <div class="mywork__description"> 
        <p>Вёрстка сайта магазина “Gllacy”, сайта по продаже мароженого</p> 
        <p>Описание выполненых работ:</p> 
        <ul> 
          <li>Фиксированая вёрстка</li> 
          <li>Оптимизированна векторная графика</li> 
          <li>Оптимизированна растравая графика</li> 
          <li>Вёрстка без использования Фреймворков</li> 
          <li>Валидная вёрстка</li> 
        </ul> 
      </div> 
    </div> 
  </div> 
</section>

зарание спасибо)))

Answer 1

Надеюсь, я правильно понял задачу...

var caption = document.querySelectorAll(".mywork__caption"); 
var discription = document.querySelectorAll(".mywork__description"); 
for (let i = 0; i < caption.length; i++) { 
  caption[i].addEventListener("click", function() { 
    for (let i = 0; i < discription.length; i++) { 
      discription[i].classList.remove("mywork__description--close"); 
    } 
    discription[i].classList.add("mywork__description--close"); 
 
  }) 
}

.mywork__description { 
  overflow: hidden; 
  background: gray; 
  height: 20px; 
  transition: all .3s; 
} 
 
.mywork__description--close { 
  overflow: hidden; 
  background: red; 
  height: 230px; 
  transition: all .3s; 
}

<section class="mywork"> 
  <div class="caption"> 
    <div class="caption__left"></div> 
    <b>Мои работы</b> 
    <div class="caption__right"></div> 
  </div> 
  <div class="mywork__container"> 
    <div class="mywork__all mywork__all--mishka"> 
      <img src="img/mishka-index-desktop.jpg" alt="" height="185" width="280"> 
      <b class="mywork__caption">“Мишка”</b> 
      <div class="mywork__description"> 
        <p>Вёрстка сайта магазина “Мишка”, игрушек ручной работы</p> 
        <p>Описание выполненных работ:</p> 
        <ul> 
          <li>Вёрстка: адаптивная + резина</li> 
          <li>Использована адаптивная графика</li> 
          <li>Оптимизирована загрузка шрифтов</li> 
          <li>Оптиизация изображений под экраны с большой плотностью пикселей, а также использование новейшего формата от Google .webp, что позволяет значительно уменьшить вес изображений и следовательно увеличить скорость загрузки страниц</li> 
          <li>Оптимизированная векторная графика</li> 
          <li>Вёрстка без использования Фреймворков</li> 
          <li>Валидная вёрстка</li> 
        </ul> 
      </div> 
    </div> 
    <div class="mywork__all mywork__all--nerds"> 
      <img src="img/nerds-index.png" alt="" height="185" width="280"> 
      <b class="mywork__caption">“nerds”</b> 
      <div class="mywork__description"> 
        <p>Вёрстка сайта магазина “Nerds”, сайта по продаже шаблонов</p> 
        <p>Описание выполненых работ:</p> 
        <ul> 
          <li>Фиксированая вёрстка</li> 
          <li>Оптимизированна векторная графика</li> 
          <li>Оптимизированна растравая графика</li> 
          <li>Вёрстка без использования Фреймворков</li> 
          <li>Валидная вёрстка</li> 
        </ul> 
      </div> 
    </div> 
    <div class="mywork__all mywork__all--gllacy"> 
      <img src="img/gllacy-index-1200.png" alt="" height="185" width="280"> 
      <b class="mywork__caption">“Gllacy”</b> 
      <div class="mywork__description"> 
        <p>Вёрстка сайта магазина “Gllacy”, сайта по продаже мароженого</p> 
        <p>Описание выполненых работ:</p> 
        <ul> 
          <li>Фиксированая вёрстка</li> 
          <li>Оптимизированна векторная графика</li> 
          <li>Оптимизированна растравая графика</li> 
          <li>Вёрстка без использования Фреймворков</li> 
          <li>Валидная вёрстка</li> 
        </ul> 
      </div> 
    </div> 
  </div> 
</section>

Answer 2

ну вообще, если по вашей проблеме, то при клике не нужен цикл. просто меняйте класс у нужного

for (var i = 0; i < caption.length; i++) {
  caption[i].addEventListener("click", function() {
    this.nextElementSibling.classList.toggle("mywork__description--close")
  })
}

Но я бы вам рекомендовал не много изменить подход, а именно: в качестве контейнера выбрать mywork__all и ему менять класс. тогда у вас будет доступ к заголовку (можете менять цвет или что-то ещё). Так же изначально скрывать блок css'ом, и добавлять класс open и через него уже открывать

var caption = document.querySelectorAll(".mywork__caption"); 
var discription = document.querySelectorAll(".mywork__all"); 
 
if (discription) { 
  for (var i = 0; i < discription.length; i++) { 
    caption[i].addEventListener("click", function() { 
    var $this = this.closest('.mywork__all'); 
    $this.classList.toggle("mywork__description--open") 
    for (var i = 0; i < discription.length; i++) { 
        if($this != discription[i]) { 
          discription[i].classList.remove("mywork__description--open"); 
        } 
      } 
    }) 
  } 
};

.mywork__description { 
  max-height: 0; 
  overflow: hidden; 
  transition: .5s all; 
} 
.mywork__description--open .mywork__description { 
  max-height: 300px; 
} 
 
.mywork__description--open .mywork__caption { 
    color: red; 
}

<section class="mywork"> 
  <div class="caption"> 
    <div class="caption__left"></div> 
    <b>Мои работы</b> 
    <div class="caption__right"></div> 
  </div> 
  <div class="mywork__container"> 
    <div class="mywork__all mywork__all--mishka"> 
      <img src="img/mishka-index-desktop.jpg" alt="" height="185" width="280"> 
      <b class="mywork__caption">“Мишка”</b> 
      <div class="mywork__description"> 
        <p>Вёрстка сайта магазина “Мишка”, игрушек ручной работы</p> 
        <p>Описание выполненных работ:</p> 
        <ul> 
          <li>Вёрстка: адаптивная + резина</li> 
          <li>Использована адаптивная графика</li> 
          <li>Оптимизирована загрузка шрифтов</li> 
          <li>Оптиизация изображений под экраны с большой плотностью пикселей, а также использование новейшего формата от Google .webp, что позволяет значительно уменьшить вес изображений и следовательно увеличить скорость загрузки страниц</li> 
          <li>Оптимизированная векторная графика</li> 
          <li>Вёрстка без использования Фреймворков</li> 
          <li>Валидная вёрстка</li> 
        </ul> 
      </div> 
    </div> 
    <div class="mywork__all mywork__all--nerds"> 
      <img src="img/nerds-index.png" alt="" height="185" width="280"> 
      <b class="mywork__caption">“nerds”</b> 
      <div class="mywork__description"> 
        <p>Вёрстка сайта магазина “Nerds”, сайта по продаже шаблонов</p> 
        <p>Описание выполненых работ:</p> 
        <ul> 
          <li>Фиксированая вёрстка</li> 
          <li>Оптимизированна векторная графика</li> 
          <li>Оптимизированна растравая графика</li> 
          <li>Вёрстка без использования Фреймворков</li> 
          <li>Валидная вёрстка</li> 
        </ul> 
      </div> 
    </div> 
    <div class="mywork__all mywork__all--gllacy"> 
      <img src="img/gllacy-index-1200.png" alt="" height="185" width="280"> 
      <b class="mywork__caption">“Gllacy”</b> 
      <div class="mywork__description"> 
        <p>Вёрстка сайта магазина “Gllacy”, сайта по продаже мароженого</p> 
        <p>Описание выполненых работ:</p> 
        <ul> 
          <li>Фиксированая вёрстка</li> 
          <li>Оптимизированна векторная графика</li> 
          <li>Оптимизированна растравая графика</li> 
          <li>Вёрстка без использования Фреймворков</li> 
          <li>Валидная вёрстка</li> 
        </ul> 
      </div> 
    </div> 
  </div> 
</section>