jQuery toggleClass example

Toggle class name on click in jQuery

by hbmaam hbmaam

HTML

<div id='box'>
 <div id='a'>
 <div id="childcontainer">
      <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>
 <div id='b'> 
 <div id="df">
      <div class="link">
         <a href="" class="">Support</a>
      </div>
    </div>
    </div>
</div>

CSS

#box {
    display: flex;
  }
#a {
    flex-grow: 1;
    height:36px;overflow:scroll;white-space: nowrap;
}
.link{
  display: inline;
}
#childcontainer{
  height:36px;overflow:scroll;
  /*white-space: nowrap;*/
}

JavaScript

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

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