jQuery toggleClass example

Toggle class name on click in jQuery

HTML

<div class="menu">
    <div class="menu-row row">
      <button class="hamburger-toggle">
        <span class="hamburger-menu">
          <span class="line line--top"></span>
          <span class="line line--middle"></span>
          <span class="line line--bottom"></span>
        </span>
      </button>
    </div>
  </div>


    <div class="offcanvas">
      <nav class="offcanvas-nav">
        <ul class="offcanvas-nav__list">
          <li class="offcanvas-nav__item">
            <a href="#" class="offcanvas-nav__link">Home</a>
          </li>

          <li class="offcanvas-nav__item">
            <a href="#" class="offcanvas-nav__link">About</a>
          </li>

          <li class="offcanvas-nav__item">
            <a href="#" class="offcanvas-nav__link">Portfolio</a>
          </li>

          <li class="offcanvas-nav__item">
              <a href="#" class="offcanvas-nav__link">Contact</a>
            </li>
        </ul>
      </nav>
    </div>

    <div class="toggle-circle">
      <div class="row">
        <svg class="hamburger-toggle__circle" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
          <circle cx="16" cy="16" r="16"/>
        </svg>
      </div>
    </div>

  
  
	<div class="content">


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu lobortis leo, in imperdiet justo. Vivamus congue dui neque, id mollis nulla congue in. Nulla dictum aliquam arcu quis varius. Integer sit amet pulvinar ex. Phasellus consectetur dignissim ligula consequat suscipit. Mauris magna ante, pretium at faucibus ac, venenatis eu metus. Etiam euismod mi vel ipsum laoreet ultricies a at mauris. Nam eu pharetra odio, ac ullamcorper est. Integer velit justo, porta quis vulputate sed, pellentesque eget enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Fusce varius lorem vitae eros rhoncus, sed blandit nibh mattis. Maecenas semper scelerisque nisl sed sollicitudin. Pellentesque convallis pulvinar massa,...

CSS

*, *:after, *:before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
a {
  text-decoration: none;
}
a:active, a:focus, a:hover, a:visited {
  text-decoration: none;
}
.has-offcanvas {
  position: fixed;
    z-index: 99;
}
.row {
  margin-left: auto;
  margin-right: auto;
  padding-right: 30px;
  padding-left: 30px;
  width: 1150px;
  max-width: 100%;
}
.menu {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2;
  width: 100%;
  padding: 15px 0;
}
.menu-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.hamburger-toggle {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  appearance: none;
  border: 0;
  background-color: transparent;
  cursor: pointer;
  outline: none;
}
.hamburger-menu {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  width: 30px;
  height: 20px;

}
.line {
  display: block;
  width: 100%;
  height: 2px;
  background-color: #fff;
}
.line--middle {
  width: 80%;
}
.line--bottom {
  width: 60%;
}
.hamburger-toggle__circle {
  width: 60px;
  height: 60px;
  fill: #ff922c;
  pointer-events: none;
  transform: scale(1) translateZ(1%, 1%, 0);
  transform-origin: center;
  transition: transform 0.5s;
}
.has-offcanvas .hamburger-toggle__circle {
  transform: scale(75) translate3d(1%, 1%, 0);
}
.offcanvas {
  position: fixed;
  top: 0;
  left: 0;

  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 100vh;
  pointer-events: none;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s, transform 0.3s;
}
.has-offcanvas .offcanvas {
  pointer-events: auto;
  opacity: 1;
  transform: none;
  z-index: 1;
}
.offcanvas-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;

}
.offcanvas-nav__item {
  font-family: Arial, sans-serif;
  font-size: 32px;
  text-align: center;
  text-transform:...

JavaScript

const $body = $('body');

const toggleOffcanvas = () => {
	$body.toggleClass('has-offcanvas');
}

$('.hamburger-toggle').on('click', toggleOffcanvas);