title: Two events, one click, no jquery
body: <p>I've been learning about events and event bubbling recently and I was trying to test myself with a little code and I've stepped a little father than I can handle.</p>
  
  <p>What I'm trying to do is when one <code>&lt;div&gt;</code> is clicked, it toggles down to reveal an extended section.  When you click on this <code>&lt;div&gt;</code> I want an animated icon to activate.  I've got it so each events happens separately but I'm still pretty new to JS and am not quite sure how to, essentially, check if <code>&lt;this&gt;</code> happens or <code>this=true</code>, make sure that happens too.</p>
  
  <p><a href="https://jsfiddle.net/theodore_steiner/jo9han2c/" rel="nofollow">Here is the code on JS Fiddle</a>.</p>
  
  <p>If anyone has any pointers, or can direct me to a further tutorial that would be fantastic.</p>
  
  <p>Raw Code:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="slideSection1"&gt;
  &lt;div class="nav-icon"&gt;
     &lt;div class="line"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code> .nav-icon {
   height: 77px;
   width: 77px;
   position: relative;
   top:-10px;}
  
  .line {
  height: 6px;
  width: 55px;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background: black;
  transition: .8s;}
  
  .line::before {
  height: 55px;
  width: 6px;
  background: black;
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  transition: .3s;}
  
  .nav-icon.active .line {
  transform: rotate(360deg);}
  
  .nav-icon.active .line::before {
  transform: rotate(90deg);}
  
  .nav-icon {
  height: 77px;
  width: 77px;
  position: relative;}
  
  .line {
  height: 6px;
  width: 55px;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background: black;
  transition: .8s;}
  
  .line::before {
  height: 55px;
  width: 6px;
  background: black;
  position: absolute;
  top: -24px;
  left: 25px;
  content: "";
  transition: .3s;}
  
  .nav-icon.active .line {
  transform: rotate(360deg);}
  
  .nav-icon.active .line::before {
  transform: rotate(90deg);}
  
   #slideSection1 {
   height: 60px;
   width: auto;
   border: 1px solid black;
   margin-top: 10px;
   margin-left: 0;
   overflow: hidden;
   border-radius: 2px;
   transition: height 500ms ease;
   -moz-transition: height 500ms ease;
   -ms-transition: height 500ms ease;
   -o-transition: height 500ms ease;
   -webkit-transition: height 500ms ease;}
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code>//animated icon
  
   function toggleactive(toggle) {
   toggle.addEventListener("click", function() {
  
       if (this.classList.contains("active") === true) {
         this.classList.remove("active");
       } else {
         this.classList.add("active");
       }
     });
   }
   //--------------------------------------------------------------------//
  
   var slideSection1 = document.getElementById("slideSection1");
   var obj = document.querySelectorAll('.nav-icon');
  
   for (var i = obj.length - 1; i &gt;= 0; i--)
   {
     var toggle = obj[i];
      toggleactive(toggle);
   };
  
  
   slideSection1.onclick = function() {
     this.style.height == "60px" ? this.style.height = "150px" :   
   this.style.height = "60px";
  
   };
  </code></pre>