jQuery toggleClass example

Toggle class name on click in jQuery

by Dedi Wibisono

HTML

<ul class="tab-button-wrapper" id="menu-name">
    <li class="menu aktip">Resep Generasi Maju</li>
    <li class="menu">Resep Generasi Maju</li>
    <li class="menu">Resep Soya Generasi Maju</li>
    <li class="menu">Resep Soya Generasi Maju</li>
    <li class="menu">Resep Soya Generasi Maju</li>
    <li class="menu">Resep Soya Generasi Maju</li>
    <li class="menu">Resep Soya Generasi Maju</li>
   </ul>

<button id="haha">test</button>

CSS

.tab-button-wrapper {
  display: block;
  overflow-x: auto;
  white-space: nowrap;
}

.aktip{
  background: red;
  color:white;
}

.tab-button-wrapper li {
  display: inline-block;
  cursor: pointer;
  border: 1px solid red;
  padding:4px;
  margin: 0 5px;
}

JavaScript

var header = document.getElementById("menu-name");
var btns = header.getElementsByClassName("menu");
for (var i = 0; i < btns.length; i++) {
    btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("aktip");
    console.log(current)
    current[0].className = current[0].className.replace(" aktip", "");
    this.className += " aktip";
    header.scrollLeft = this.offsetLeft - 50
});
}