Could not toggle nav items and icon

Question

I am learning vanilla javascript and i wanted to implement the nav features similar to http://www.startupturkey.com/ when hamburger icon is clicked. I tried but could not toggle the hamburger icon to remove icon when clicked and vice versa along with the nav items to show like in the reference link. What i tried is get the value of attribute class of icon and change it to remove if value is content and vice versa. I have created a fiddle too and here is the link of it

https://jsfiddle.net/0taywkL5/

Also here is my code

<header class="header">
      <!-- <i class="reorder icon"></i> -->
      <a href="#" class="header__logo">LOGO</a>
      <i class="content icon header-icon" style="float: right;"></i>
      <div class="ui vertical menu" style="display:none;">
        <a class="active teal item">
          Blog
        </a>
        <a class="item">
          Discussion
        </a>
        <a class="item">
          Features
        </a>
        <a class="item">
          Team
        </a>
      </div>
    </header>
    <section class="home-header show">
      <div class="overlay"></div>
      <div class="request-invitation">
        <h2>REQUEST AN INVITATION</h2>
      </div>
      <div class="connyct-short-intro">
        <h1>HEADING IN THE MIDDLE OF IMAGE</h1>
      </div>
    </section>


document.querySelector('.header-icon').addEventListener('click', function(){
  var value = this.getAttribute('class');
   if (value === "content"){
     console.log('yes content');
     this.classList.remove('content');
     this.classList.add('remove');
   } else {
     this.classList.remove('remove');
     this.classList.add('content');
   }
    var verticalMenu = document.querySelector('.vertical');
    verticalMenu.style.display = 'block';
});

I don't want to jump to jquery. Can anyone please help me with the vanilla javascript?

Answer 1

I thought that simple in http://www.startupturkey.com/ is using a div to cover the menu burger icon, and when you toggle the burger icon, the div fade out but not remove the burger icon (you can check out with development tool F12).

As your fiddle, I edited another version with this effect for you(but not that pretty XDD)

https://jsfiddle.net/GeorgioWan/0taywkL5/1/

p.s. Animation by Animate.css

Answer 2

I could do this but if anyone has suggestion on code improvement please do suggest me

document.querySelector('.header-icon').addEventListener('click', function(){
  var value = this.getAttribute('class');
   if (this.className === "icon header-icon content"){
     console.log('yes content');
     this.classList.remove('content');
     this.classList.add('remove');
   } else {
     this.classList.remove('remove');
     this.classList.add('content');
   }
    var verticalMenu = document.querySelector('.vertical');
    verticalMenu.style.display = verticalMenu.style.display === "none" ? "block" : "none";
});