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

#javascript

Имеется раздел с 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");
    }
  })
}

  

    

    Мои работы
    

  
  

    

      
      “Мишка”
      

        
Вёрстка сайта магазина “Мишка”, игрушек ручной работы
        
Описание выполненных работ:
        

          
Вёрстка: адаптивная + резина
          
Использована адаптивная графика
          
Оптимизирована загрузка шрифтов
          
Оптиизация изображений под экраны с большой плотностью пикселей, а
также использование новейшего формата от Google .webp, что позволяет значительно уменьшить
вес изображений и следовательно увеличить скорость загрузки страниц
          
Оптимизированная векторная графика
          
Вёрстка без использования Фреймворков
          
Валидная вёрстка
        
      
    
    

      
      “nerds”
      

        
Вёрстка сайта магазина “Nerds”, сайта по продаже шаблонов
        
Описание выполненых работ:
        

          
Фиксированая вёрстка
          
Оптимизированна векторная графика
          
Оптимизированна растравая графика
          
Вёрстка без использования Фреймворков
          
Валидная вёрстка
        
      
    
    

      
      “Gllacy”
      

        
Вёрстка сайта магазина “Gllacy”, сайта по продаже мароженого
        
Описание выполненых работ:
        

          
Фиксированая вёрстка
          
Оптимизированна векторная графика
          
Оптимизированна растравая графика
          
Вёрстка без использования Фреймворков
          
Валидная вёрстка
        
      
    
  





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

Ответы

Ответ 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() {
    if (discription[i].classList.contains('mywork__description--close')) {
      discription[i].classList.remove('mywork__description--close');
    } else {
      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: 0px;
  transition: all .3s;
}

.mywork__description--close {
  overflow: hidden;
  background: #ccc;
  height: 230px;
  transition: all .3s;
}

  

    

    Мои работы
    

  
  

    

      
      “Мишка”
      

        
Вёрстка сайта магазина “Мишка”, игрушек ручной работы
        
Описание выполненных работ:
        

          
Вёрстка: адаптивная + резина
          
Использована адаптивная графика
          
Оптимизирована загрузка шрифтов
          
Оптиизация изображений под экраны с большой плотностью пикселей, а
также использование новейшего формата от Google .webp, что позволяет значительно уменьшить
вес изображений и следовательно увеличить скорость загрузки страниц
          
Оптимизированная векторная графика
          
Вёрстка без использования Фреймворков
          
Валидная вёрстка
        
      
    
    

      
      “nerds”
      

        
Вёрстка сайта магазина “Nerds”, сайта по продаже шаблонов
        
Описание выполненых работ:
        

          
Фиксированая вёрстка
          
Оптимизированна векторная графика
          
Оптимизированна растравая графика
          
Вёрстка без использования Фреймворков
          
Валидная вёрстка
        
      
    
    

      
      “Gllacy”
      

        
Вёрстка сайта магазина “Gllacy”, сайта по продаже мароженого
        
Описание выполненых работ:
        

          
Фиксированая вёрстка
          
Оптимизированна векторная графика
          
Оптимизированна растравая графика
          
Вёрстка без использования Фреймворков
          
Валидная вёрстка
        
      
    
  



Ответ 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;
}

  

    

    Мои работы
    

  
  

    

      
      “Мишка”
      

        
Вёрстка сайта магазина “Мишка”, игрушек ручной работы
        
Описание выполненных работ:
        

          
Вёрстка: адаптивная + резина
          
Использована адаптивная графика
          
Оптимизирована загрузка шрифтов
          
Оптиизация изображений под экраны с большой плотностью пикселей, а
также использование новейшего формата от Google .webp, что позволяет значительно уменьшить
вес изображений и следовательно увеличить скорость загрузки страниц
          
Оптимизированная векторная графика
          
Вёрстка без использования Фреймворков
          
Валидная вёрстка
        
      
    
    

      
      “nerds”
      

        
Вёрстка сайта магазина “Nerds”, сайта по продаже шаблонов
        
Описание выполненых работ:
        

          
Фиксированая вёрстка
          
Оптимизированна векторная графика
          
Оптимизированна растравая графика
          
Вёрстка без использования Фреймворков
          
Валидная вёрстка
        
      
    
    

      
      “Gllacy”
      

        
Вёрстка сайта магазина “Gllacy”, сайта по продаже мароженого
        
Описание выполненых работ:
        

          
Фиксированая вёрстка
          
Оптимизированна векторная графика
          
Оптимизированна растравая графика
          
Вёрстка без использования Фреймворков
          
Валидная вёрстка