Как сделать выпадающий блок?

Question

[scaardssa]

Здравствуйте, есть несколько одинаковых блоков, которые по умолчанию свернуты, при клике по title блоки должны разворачиваться (появляться description) и классу arrow1 добавляться класс arrow2, как развернуть блок и помощью цикла примерно представляю, а вот как еще и класс добавить не могу разобраться

<div class="title">
            <div class="text">Текст</div>
            <div class="arrow1"></div>
         </div>
         

          <div class="description">
               text...
           </div>

Comments

[kulaeff]

А где код?

[Роман]

kulaeff, а это походу и есть весь код))))

Answer 1

[Сергей]

let title = document.getElementsByClassName('title'),
    arrow1 = document.getElementsByClassName('arrow1');
    title[0].onclick = function() {
    arrow1[0].classList.add("arrow2");
};

Comments

[scaardssa]

Спасибо, так я делал, но не получается сделать, чтобы работало для нескольких одинаковых блоков на странице,не могли бы Вы посмотреть код, понимаю, что ошибка в чем-то очень глупом, но сам не могу понять в чем, тк почти не знаю js

let title = document.querySelectorAll(".title");
let i;
for (i = 0; i < title.length; i++) {
 title[i].addEventListener("click", function() {
   let description = this.nextElementSibling;
   let arrow = document.querySelector(".arrow1");
   arrow.classList.toggle("arrow2");
   if (description.style.display === "block") {
     description.style.display = "none";
   } else {
     description.style.display = "block";
   }
});
};

[Сергей]

scaardssa, честно говоря без всего кода очень сложно что-либо сделать. Приходится самому выдумывать некий html и только надеяться, что он похож на Ваш =). Залейте весь код в песочницу, так и нам и Вам будет проще.

Возможно, вам поможет этот вариант:

let title = document.querySelectorAll(".title"),
    arrow1 = document.querySelectorAll('.arrow1');
for (let i = 0; i < title.length; i++) {
    title[i].onclick = function(){
      for (let i = 0; i < arrow1.length; i++) {
    arrow1[i].classList.add("arrow2");
      }
  };
}

[scaardssa]

Сергей, почти получилось, но при раскрытии блока подсвечиваются обе "стрелки", вот залил в песочницу, https://jsfiddle.net/scaard/391ap7wv/ буду очень признателен, если посмотрите

[Сергей]

scaardssa,

let title = document.querySelectorAll(".title");
let arrow1 = document.querySelectorAll(".arrow1");

for (let i = 0; i < title.length; i++) {
 title[i].addEventListener("click", function() {
      arrow1[i].classList.toggle("arrow2");
   let description = this.nextElementSibling;
   if (description.style.display === "block") {
     description.style.display = "none";
   } else {
     description.style.display = "block";
   }
});
}

https://jsfiddle.net/t7w82fsr/

[scaardssa]

Сергей, мда, ведь пробовал такой вариант и похоже просто где-то сделал синтаксическую ошибку. Спасибо огромное)