subnav vanilla js

by ordette

HTML

<div>
  <ul>
    <li>Item 1</li>
    <div>
      <button class="v" id="v">v</button>
      <ul id="subNav1" class="subnav">
        <li>sub 1</li>
        <li>sub 2</li>
        <li>sub 3</li>
      </ul>
    </div>
    
    <li>Item 2</li>
    <div>
    <button class="v">v</button>
    <ul id="subNav2" class="subnav">
      <li>sub 1</li>
      <li>sub 2</li>
      <li>sub 3</li>
    </ul>
    </div>
    <li>Item 3</li>
    <div>
    <button class="v">v</button>
    <ul id="subNav3" class="subnav">
      <li>sub 1</li>
      <li>sub 2</li>
      <li>sub 3</li>
      <p class="oranges, pie"></p>
    </ul>
    </div>
    <p class="cutie"></p>
  </ul>
</div>
<p class="pink, oranges"></p>

CSS

ul ul {
  display: none;
}

.active {
  display: block;
}

JavaScript

var button = document.getElementsByClassName("v");

for (var i = 0; i < button.length; i++) {
  button[i].addEventListener('click', function() {


    var sub = this.parentNode.querySelectorAll('ul');
    console.log(sub);
    sub[0].classList.toggle('active');

  });
};  


  /* var classname = document.getElementsByClassName("classname");

  var myFunction = function() {
      var attribute = this.getAttribute("data-myattribute");
      alert(attribute);
  }; */


  //var jog = document.querySelectorAll('ul.subnav');
  //console.log(jog);

  //select sub ul
  //let matches = document.body.querySelectorAll('p');
  //console.log(matches);

  //console.log("button clicked");
  //console.log(this.parentNode.classList, 'ul class');
  /*if (document.body.classList.contains('active')) {
    subNav1.classList.remove('active');
  }
  else {
  	subNav1.classList.toggle('active');
  }*/
  /*document.body.classList.add('thisClass');
  // $('body').addClass('thisClass');

  document.body.classList.remove('thatClass');
  // $('body').removeClass('thatClass');

  document.body.classList.toggle('anotherClass');
  // $('body').toggleClass('anotherClass');*/