e.querySelector not getting child elements when clicking on parent

Question

I am trying to make a list of items, each one might have children items as well. I want that the child ul to be hidden by default, then when I click on the parent element, I can toggle a class to make it appear or disappear.

Here's how my code looks so far:

function selectHeader(e){
 e.children[0].classList.toggle("collapse")
   e.children[0].classList.toggle("expand")
  e.querySelector('.items')[0].classList.toggle('hidden')
}

*{
  margin: 0; 
  padding: 0; 
  box-sizing: border-box;
}

.container{
  margin-left: 10px; 
  margin-top: 10px; 
}
.tile img{
  width: 300px;
  height: auto;
  display: block;
}

.tile {
  width: 300px; 
  display: inline-block;
  position: relative;
  border-radius: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
  transition: 0; 
  max-height: 300px;
  overflow: hidden;
}

.details {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  width: 300px;
  background-color: #e74c3c;
  transition: 0.5s ease;
  max-height: 300px; 
  min-height: 300px;
}

.tile:hover .details {
  opacity: 0.9;
   overflow: auto;

}


/* Front Area */ 
.tile:hover .tileName {
  display: none;
}

.front{
  position: relative;
}
.tileName{
  background: #e74c3c;
  opacity: 0.7; 
  position: absolute; 
top: 0;
  width: 100%;
  height: 50px;
}

.tileName h3{
  color: white; 
  margin: 0 auto;
  width: 50%;
  text-align: center;
  margin-top: 10px;
}


/* Headers */ 
ul{
  padding: 0px; 
}
ul.headers, ul.headers a{
  color: white; 
}
 
ul.headers > li{
  background: #bdc3c7;
  width: 100%;
  margin: 0px; 
  padding: 10px;
  color: red; 
  border-bottom: 1px solid white; 
  cursor: pointer; 
}

ul.headers > li:hover {
  color: white
}

.expand{
  font-weight: bold; 
  font-size: 16px; 
}

.header > .expand:before{
    content: '\22CE';
}

.header > .collapse:before{
      content: '\22CF';
    
}


/* Items */
ul.items{
  transition: 1s; 
}

ul.items.hidden{
  display: none;
}

<div class="container">
  <div class="tile">
    <div class="front">
      <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" />
      <div class="tileName">
        <h3>Sports</h3>
      </div>
    </div>
    <div class="details">
      <ul class="headers">
        <li onclick="selectHeader(this)" class="header"><span class="expand"></span>
          <span class="headerName">header 1</span> <a href="#"></a>
          <ul class="items hidden">
            <li class="item ">ite1</li>
            <li class="item">ite1</li>
            <li class="item">ite1</li>

          </ul>
        </li>
        <li onclick="selectHeader(this)" class="header"><span class="expand"></span> <span class="headerName">header 1</span>
          <a href="#" </a>
            <ul class="items hidden">
              <li class="item ">ite1</li>
              <li class="item">ite1</li>
              <li class="item">ite1</li>

            </ul>
        </li>
      </ul>
    </div>
  </div>
  <div class="tile">
    <div class="front">
      <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar">
    </div>
    <div class="details">
      <h1>John Doe</h1>
      <p>Architect & Engineer</p>
      <p>We love that guy, We love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyW
        <p>We love that guy, We love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe
          love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love
          that guyWe love that guyWe love that guyWe love that guy</p>
        <p>We love that guy, We love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe
          love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love
          that guyWe love that guyWe love that guyWe love that guy</p>
        <p>We love that guy, We love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe
          love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love
          that guyWe love that guyWe love that guyWe love that guy</p>
        e love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that
        guyWe love that guyWe love that guyWe love that guyWe love that guy</p>
    </div>
  </div>

</div>

What I am thinking of doing is to toggle the class "expand" which is there by default, and toggle class "collapse" to show the expand/collapse icons, and at the same time to toggle the class hidden on the inner ul. toggling expand/collapse on the span works (not sure if there's a better way to do it), but I am not able to use: e.querySelector('.items')[0].classList.toggle('hidden') when clicking on the header, to get the items list and toggle its hidden class.

Answer 1

You need to either use e.querySelectorAll('.items')[0] or e.querySelector('.items'). The first one will return a collection of element and the second one will return one element.

function selectHeader(e){
  e.children[0].classList.toggle("collapse")
  e.children[0].classList.toggle("expand")
  e.querySelectorAll('.items')[0].classList.toggle('hidden')
}

*{
  margin: 0; 
  padding: 0; 
  box-sizing: border-box;
}

.container{
  margin-left: 10px; 
  margin-top: 10px; 
}
.tile img{
  width: 300px;
  height: auto;
  display: block;
}

.tile {
  width: 300px; 
  display: inline-block;
  position: relative;
  border-radius: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
  transition: 0; 
  max-height: 300px;
  overflow: hidden;
}

.details {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  width: 300px;
  background-color: #e74c3c;
  transition: 0.5s ease;
  max-height: 300px; 
  min-height: 300px;
}

.tile:hover .details {
  opacity: 0.9;
   overflow: auto;

}


/* Front Area */ 
.tile:hover .tileName {
  display: none;
}

.front{
  position: relative;
}
.tileName{
  background: #e74c3c;
  opacity: 0.7; 
  position: absolute; 
top: 0;
  width: 100%;
  height: 50px;
}

.tileName h3{
  color: white; 
  margin: 0 auto;
  width: 50%;
  text-align: center;
  margin-top: 10px;
}


/* Headers */ 
ul{
  padding: 0px; 
}
ul.headers, ul.headers a{
  color: white; 
}
 
ul.headers > li{
  background: #bdc3c7;
  width: 100%;
  margin: 0px; 
  padding: 10px;
  color: red; 
  border-bottom: 1px solid white; 
  cursor: pointer; 
}

ul.headers > li:hover {
  color: white
}

.expand{
  font-weight: bold; 
  font-size: 16px; 
}

.header > .expand:before{
    content: '\22CE';
}

.header > .collapse:before{
      content: '\22CF';
    
}


/* Items */
ul.items{
  transition: 1s; 
}

ul.items.hidden{
  display: none;
}

<div class="container">
  <div class="tile">
    <div class="front">
      <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" />
      <div class="tileName">
        <h3>Sports</h3>
      </div>
    </div>
    <div class="details">
      <ul class="headers">
        <li onclick="selectHeader(this)" class="header"><span class="expand"></span>
          <span class="headerName">header 1</span> <a href="#"></a>
          <ul class="items hidden">
            <li class="item ">ite1</li>
            <li class="item">ite1</li>
            <li class="item">ite1</li>

          </ul>
        </li>
        <li onclick="selectHeader(this)" class="header"><span class="expand"></span> <span class="headerName">header 1</span>
          <a href="#"> </a>
            <ul class="items hidden">
              <li class="item ">ite1</li>
              <li class="item">ite1</li>
              <li class="item">ite1</li>

            </ul>
        </li>
      </ul>
    </div>
  </div>
  <div class="tile">
    <div class="front">
      <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar">
    </div>
    <div class="details">
      <h1>John Doe</h1>
      <p>Architect & Engineer</p>
      <p>We love that guy, We love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyW
        <p>We love that guy, We love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe
          love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love
          that guyWe love that guyWe love that guyWe love that guy</p>
        <p>We love that guy, We love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe
          love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love
          that guyWe love that guyWe love that guyWe love that guy</p>
        <p>We love that guy, We love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe
          love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love
          that guyWe love that guyWe love that guyWe love that guy</p>
        e love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that
        guyWe love that guyWe love that guyWe love that guyWe love that guy</p>
    </div>
  </div>

</div>