CODEWITHSUNDEEP
javascripthtmlcss
djembla95
djembla95

Reputation: 37

Remove class after the click

I made a toggle-menu for my website, with some effects on the (hamburger toggle button) menu icon. The thing is that using javascript, I added a class "close", so when I click on the menu icon, it transforms to an "X" (close). This works perfectly when I click on the menu icon.

However, if I click on any of the elements from the toggle-menu-content, the "X" stays. What should I do/code so the class "close" disappears again (and shows a regular "hamburger" menu icon instead of "X") when I click on any element in toggle-menu (or outside the toggle-menu, anywhere), and not only when I click on the "hamburger" menu-icon?

You can take a look at my website at vlad095.github.io and check out the toggle menu for mobile devices. That way you can see what I mean. Take a look at how the menu icon behaves when you click on it, and how it behaves when you click on the toggle-menu-content elements or anywhere outside the menu.

Thanks!

HTML: 

      <!-- toggle button -->
      <button id="toggle-btn" onclick="toggleMenu()">
        <span class="line line1"></span>
            <span class="line line2"></span>
            <span class="line line3"></span>
      </button> <!-- end toggle button -->

      <div id="toggle-menu-display">
        <div class="toggle-menu-content">
          <a onclick="closeMenu()" href="#section1">ems training</a>
          <a onclick="closeMenu()" href="#section2">why ems?</a>
          <a onclick="closeMenu()" href="#section3">get started</a>
          <a onclick="closeMenu()" href="#section4">contact us</a>
          <a onclick="closeMenu()" href="index.html">norsk</a>
        </div>
      </div>
    </div> <!-- end toggle menu -->

CSS:

/* toggle menu */
#toggle-btn {
  background-color: transparent;
  float right;
  position: relative;
  top: 22px;
  right: 22px;
  width: 32px;
  height: 32px;
  border: none;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  }

  .line {
    position: absolute;
    right: 5%;
    width:100%;
    height: 2px;
    background: #fcfdfe;
    border-radius: 5px;
    transition: all cubic-bezier(0.25, 0.1, 0.28, 1.54) 0.32s;
  }

  .line1 {top: 5px;}
  .line2 {top: 17px;}
  .line3 {top: 29px;}

  #toggle-btn.close .line1 {
    transform: rotate(45deg);
    top: 17px;
  }

  #toggle-btn.close .line2 {display: none;}

  #toggle-btn.close .line3 {
    transform: rotate(-45deg);
    top: 17px;
  }

  .toggle-menu {
    float: right;
    position: relative;
    position: relative;
    top: 0;
    right: 0;
    display: inline-block;
  }

  .toggle-menu-content {
    display: none;
    position: absolute;
    right: 0;
    background-color: #fff;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    text-align: center;
    text-transform: uppercase;
    font-size: 14px;
    width: 100vw;
    margin-top: 40px;
  }

  .toggle-menu-content a {
    text-decoration: none;
    display: block;
    color: #4f4f4f;
    font-weight: bold;
    padding: 15px;
    border-bottom: 1px solid #ccc;
  }

  .toggle-menu-content a:first-child {border-top: 1px solid #ccc;}
  .toggle-menu-content a:last-child {padding-bottom: 16px;}

  .toggle-menu:hover .toggle-menu-content {display:block;}

  /*  nav_transform.js after class */
  .header.after .line {
    background-color: #4f4f4f;
    box-shadow: 0 2px 5px rgba(0,0,0,.2);
  }

JS:

 // Adding close class on-click
 $(document).ready(function() {
   $('#toggle-btn').click(function() {
     $('#toggle-btn').toggleClass('close');
   })
 })


 //Menu-toggle button functions
 function toggleMenu() {
   var menuBox = document.getElementById('toggle-menu-display');

   if (menuBox.style.display == "block") {
     menuBox.style.display = "none";
   } else {
     menuBox.style.display = "block";
   }
 }

 function closeMenu() {
   var menuBox = document.getElementById('toggle-menu-display');
   menuBox.style.display = "none";
 }

Upvotes: 2

Views: 4445

Answers (2)

Oke Tega
Oke Tega

Reputation: 883

You are already using the right function in your jQuery all you need to do is to add the classes you want to toggle between

 // Adding close class on-click
 $(document).ready(function() {
   $('#toggle-btn').click(function() {
     //add both classes in toggleClass
     $('#toggle-btn').toggleClass('close open');
   })
 });

This would toggle between .close and .open i.e shows close when #toggle-btn is .clickand shows .open when it is clicked again.

You could as add

$('body').click(function() {
    $('#toggle-btn').removeClass('close');
});

Upvotes: 1

LJD
LJD

Reputation: 496

Sounds like you want to use mouseup event in jquery and mousedown event in jquery.

In each you could do:

$el.addClass("className")

And:

$el.removeClass("className")

Upvotes: 2

Related Questions