How to make a dropdown box?

Hello, there are several identical blocks which by default are collapsed, when you click on title blocks to be expanded (to receive the description) and class arrow1 added class arrow2 how to deploy the unit and using some idea, but still add class can't understand

<div class="title">
 <div class="text">Text</div>
 <div class="arrow1"></div>
</div>


 <div class="description">
text...
 </div>
April 4th 20 at 13:13
1 answer
April 4th 20 at 13:15
Solution
let title = document.getElementsByClassName('title'),
 arrow1 = document.getElementsByClassName('arrow1');
 title[0].onclick = function() {
arrow1[0].classList.add("arrow2");
};
Thanks, I did, but can't make it work for multiple identical blocks on the page,could You view the code, you know that the error is in something very stupid, but I can't figure out what, maybe, almost do not know 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";
}
});
};
- citlalli.Blo commented on April 4th 20 at 13:18
@citlalli.Blohonestly without code is very difficult to do anything. You have to invent some html and can only hope that it is similar to yours =). Pour all of the code in the sandbox, and us, and You will be.

Maybe you'll find this option:
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");
}
};
}
- aniyah72 commented on April 4th 20 at 13:21
@aniyah72, almost worked, but when opening the unit are illuminated, both "arrows", that's poured in the sandbox, https://jsfiddle.net/scaard/391ap7wv/ I would really appreciate if view - citlalli.Blo commented on April 4th 20 at 13:24
@citlalli.Blo,
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/ - aniyah72 commented on April 4th 20 at 13:27
@aniyah72, hmm, because I tried this option and it seems just made a syntax error. Thank you very much) - citlalli.Blo commented on April 4th 20 at 13:30

Find more questions by tags JavaScript