jQuery toggleClass example

Toggle class name on click in jQuery

by mamounothman

HTML

<div class="topnav" id="myTopnav">
    <div class="container" onclick="anim(this)">
        <div class="baricon1"></div>
        <div class="baricon2"></div>
        <div class="baricon3"></div>
    </div>
    <a style="width: 15%" class="navlinks" id="active">test</a>
    <a style="width: 10%" class="navlinks" class="navblocks">test</a>
    <div class="dropdown" style="cursor: pointer;">
      <button class="dropbtn" id="a" style="cursor: pointer;">test▼
        <i class="fas fa-angle-double-down"></i>
      </button>
      <div class="dropdown-content"id="aa">
        <a >test</a>
        <a>test</a>
        <a class="last">test</a>
      </div>
    </div> 
    <a style="width: 10%" class="navlinks" class="navblocks" href="seances-et-tarifs.html">test</a>
    <div class="dropdown" style="cursor: pointer;">
      <button class="dropbtn" id="b" style="cursor: pointer;">test▼
        <i class="fas fa-angle-double-down"></i>
      </button>
      <div class="dropdown-content" id="bb">
        <a>test</a>
        <a>test</a>
        <a class="last">test</a>
      </div>
    </div> 
    <a style="width: 8%" class="navlinks" class="navblocks">test</a>
     <a style="width: 8%" class="navlinks" class="navblocks">test</a>
     </div>
    
<div class="separate"></div>

CSS

.topnav {
  overflow: hidden;
  background-color: white;
  max-height:60px;
  transition: max-height 0.7s ease-out;
}
.separate{
  margin-left: 5px;
  margin-right: 5px;
  border-bottom: 1px solid #20B6E7;
}
.topnav a {
  background-color: #72C1EC; 
  margin:5px;
  float: left;
  display: block;
  color:#FFFFFF;  
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}
#active {
  background:#00A9EC!important;
  color:#FFFFFF!important;
}
#active:hover,#active:active,#active:focus{
  background-color: #20B6E7!important;
}

.topnav .icon {
  display: none;
}

.dropdown {
  float: left;
  overflow: hidden;
  margin-top: 5px;
}
.dropdown .dropbtn {
  font-size: 17px;    
  border: none;
  outline: none;
  color:#FFFFFF;
  padding: 14px 16px;
  background-color: #72C1EC;
  font-family: inherit;
}
.dropbtn{
  margin-left: 5px;
  margin-right: 5px;
  width: auto;
  cursor: pointer;
}

.dropdown-content {
  display: none;
  position: absolute;
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color:#FFFFFF;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  margin:5px;
  background-color: #91d9ff;
}
.last {
  margin-bottom: 0px!important;
}

.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #65DCF8;
  color:#FFFFFF;
}

.dropdown-content a:hover {
  background-color: #65DCF8;
  color:#FFFFFF;
}
.add{
 display: block;
}
.container {
  display: none;
}

.baricon1, .baricon2, .baricon3 {
  width: 30px;
  height: 4px;
  border-radius: 10px;
  background-color: black;
  margin: 5px auto;
  transition: 0.6s;
}
.animate .baricon1{
  transform: translate(0, 9px) rotate(585deg);
} 

.animate .baricon2{
  opacity: 0;
}
.animate .baricon3{
  transform: translate(0, -9px) rotate(-585deg);
}
@media screen and (max-width: 570px){
  .planningflex{
    flex-direction: column!important;
  }
}

@media screen and (max-width: 960px) {
  .topnav a, .dropdown .dropbtn {
    display: none;
  }
 ...

JavaScript

function anim(move) {
    move.classList.toggle("animate"); 
  
    var x = document.getElementById("myTopnav");
    x.classList.toggle("responsive");
    
  }
  $(() => {
  $('.dropbtn#a').click((e) => {
    $('.dropdown-content#aa').toggleClass('add');
  });
  $('.dropbtn#b').click((e) => {
    $('.dropdown-content#bb').toggleClass('add');
  });
});