nested collapsed divs

by trentHarlem

HTML

<div class='topic1'>
  <button class='topic'>Topic 1</button>
  <div class='question-container'>

    <button class="question">Question 1</button>
    <div class="line"></div>
    <div class="answer">
      Answer 1
    </div>

    <button class="question">Question 2</button>
    <div class="line"></div>
    <div class="answer">
      Answer 2
    </div>

    <button class="question">Question 3</button>
    <div class="line"></div>
    <div class="answer">
      Answer 3
    </div>
  </div>
</div>

<div class='topic2'>
  <button class='topic'>Topic 2</button>
  <div class='question-container'>

    <button class="question">Question 4</button>
    <div class="line"></div>
    <div class="answer">
      Answer 4
    </div>

    <button class="question">Question 5</button>
    <div class="line"></div>
    <div class="answer">
      Answer 5
    </div>

    <button class="question">Question 6</button>
    <div class="line"></div>
    <div class="answer">
      Answer 6
    </div>
  </div>
</div>


<div class='topic3'>
  <button class='topic'>Topic 3</button>
  <div class='question-container'>

    <button class="question">Question 7</button>
    <div class="line"></div>
    <div class="answer">
      Answer 7
    </div>

    <button class="question">Question 8</button>
    <div class="line"></div>
    <div class="answer">
      Answer 8
    </div>

    <button class="question">Question 9</button>
    <div class="line"></div>
    <div class="answer">
      Answer 9
    </div>
  </div>
</div>

CSS

.topic {
  background-color: transparent;
  color: #329d9c;
  cursor: pointer;
  padding: 2% 10%;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 18px;
  font-weight: 700;
  transition: all ease-in-out 0.3s;

}


.topic::after {
  content: "\276F";
  font-size: 20px;
  color: black;
  float: left;
  margin-left: -6%;
  font-weight: 700;
  transform: rotate(-90deg);
}

.question {
  position: relative;
  left: 100px;
  display: block;
  background-color: transparent;
  color: #329d9c;
  cursor: pointer;
  padding: 2% 10%;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 18px;
  font-weight: 700;
  transition: all ease-in-out 0.3s;

}

.question::after {
  content: "\276F";
  font-size: 20px;
  color: black;
  float: left;
  margin-left: -6%;
  font-weight: 700;
  transform: rotate(-90deg);
}

.question-container {
  display: none;
}

.active::after {
  content: "\276F";
  font-size: 20px;
  color: black;
  float: left;
  margin-left: -6%;
  font-weight: 700;
  transform: rotate(90deg);
}

.line {
  width: 90%;
  height: 1%;
  background-color: #dddddd;
  border-radius: 30px;
  position: absolute;
  margin-left: 10%;
}

.answer {
  margin-left: 10%;
  padding: 0 6%;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: white;
  box-shadow: 1px 2px #929191;
  border: none;
  border-radius: 0 0 10px 10px;
  color: black;
}

.show {
  display: block;
}
/* 
.topic:focus~.question {
  display: block;
}
 */

JavaScript

/* document.addEventListener('DOMContentLoaded', function(event) {
console.log('the DOM is available');
}); */

const topic = document.getElementsByClassName('topic');
const topicQS = document.querySelectorAll('.topic');
let topicArray = []
let topicQSArray = []
  console.log('keys', Object.keys(topic)); //3
  console.log('keysQS', Object.keys(topicQS)); //3
  //console.log('topicQSArray',topicQSArray)

// getElementsByClassName   getElementsByClassName  
/* 
for (let i = 0; i < topic.length; i++) {
  topic[i].addEventListener('click', showQuestion) 
  topicArray.push(i)
  console.log('topicArray',topicArray)
 // console.log('keys', Object.keys(topic)); //3
}
function showQuestion(e) {
    this.classList.toggle('active');
    let questions = document.getElementsByClassName('question');
      let index = topicArray.indexOf()
      console.log('index', index)
      for (let j = 0; j < questions.length; j++) 
     questions[j].classList.toggle('show');
    }
     */
    
    
    // QUERY SELECTOR ALL
    
    for (let i = 0; i < topicQS.length; i++) {
  topicQS[i].addEventListener('click', function showQuestionQS(e) {
    //this.classList.toggle('active');
    this.nextElementSibling.classList.toggle('show');
    //this.lastElementSibling.classList.toggle('show');
    let questionsQS = document.querySelectorAll('question');
   /*    let index = i
        console.log('index', index)
      for (let j = 0; j < questionsQS.length; j++) {
          this.nextElementSibling.classList.toggle('show');
           } */
    }) 
  //topicQSArray.push(i)
  //let index = i
  //console.log('index', index)
  //console.log('topicQSArray',topicQSArray)
 // console.log('keys', Object.keys(topic)); //3
    }
    

const question = document.getElementsByClassName("question");

for (let i = 0; i < question.length; i++) {
  question[i].addEventListener("click", function() {
    this.classList.toggle("active");
    const answer = this.nextElementSibling.nextElementSibling;
    if...