jQuery toggleClass example

Toggle class name on click in jQuery

by hbmaam hbmaam

HTML

<div id="maincontainer">
    <div id="leftcontainer">
      <div class="link">
         <a href="" class="">Investors1</a>
      </div>
      <div class="link">
         <a href="" class="">Investors2</a>
      </div>
      <div class="link">
         <a href="" class="">Investors3</a>
      </div>
      <div class="link">
         <a href="" class="">Investors4</a>
      </div>
      <div class="link">
         <a href="" class="">Investors5</a>
      </div>
    </div>
    <div id="Supportcontainer">
      <div class="link">
         <a href="" class="">Support</a>
      </div>
    </div>
</div>

CSS

.link
{
  display: inline-block;
}
#maincontainer
{
  display: block;
  width: 100%;
  height: 36px;
  background-color: gray;
  overflow: hidden;
}
#leftcontainer
{
  width: auto;
  float: left;
  overflow: hidden;
}
#Supportcontainer
{
  width: auto;
  overflow: hidden;
}

JavaScript

// find elements
var banner = $("#banner-message")
var button = $("button")

// handle click and add class
button.on("click", () => {
  banner.toggleClass("alt")
})