jQuery addClass example

Change class name on click in jQuery

HTML

<p>
Example 1 with big image
</p>
<div class="container">
  <div class="nav-container">
    <div class="nav">
       <div> </div>
       <div> </div>
       <div> </div>
    </div>
  </div>
  <div class="logo">
   <img src="https://i.pinimg.com/originals/7c/51/98/7c5198d2a0751fa76c8433dba4a1a12a.jpg" />
  </div>
</div>
<br />
<br />
<p>
Example 2 with small text
</p>
<div class="container">
  <div class="nav-container">
    <div class="nav">
       <div> </div>
       <div> </div>
       <div> </div>
    </div>
  </div>
  <div class="logo">
   123
  </div>
</div>

CSS

.container
{
  width:100%;
  max-width:375px;
  background-color:white;
  display:block;
  padding:10px;
}

.logo
{ 
  display:table;
  color:#000;
  padding-left:10px;
}
.logo img
{
  max-width:100%;
}

.nav-container
{
  /* display:inline-block; */
  /* float:left; */
}

.nav
{
  padding:10px;
  float:left;
  background-color:grey;
  cursor:pointer;
}

.nav div
{
  height:5px;
  background-color:black;
  margin-top:5px;
  width:50px;
}

body {
  background: #20262E;
  padding: 20px;
  color:white;
  font-family:sans-serif;
}

JavaScript

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

// handle click and add class
button.on("click", function(){
  banner.addClass("alt")
})