jQuery addClass example

Change class name on click in jQuery

by D S

HTML

<div class="p009">
  <div class="item1Panel">
    <div class="row">
      <div class="playRowB">1</div>
      <div class="titleRow"></div>
      <div class="artistRow"></div>
      <div class="dlRow">4</div>
      <div class="linkRow">5</div>
      <div class="repeatRow">6</div>
      <div class="timeRow">7</div>
      <div class="barRow">8</div>
    </div>
  </div>
  <div class="item2Cover">COVER</div>
  <div class="item3Control">
    <div class="prevB">perv</div>
    <div class="playB">play</div>
    <div class="nextB">next</div>
    <div class="suffB">shuf</div>
    <div class="volmB">volm</div>
  </div>
</div>

CSS

body {
  background: #20262E;
  color: #fff;
}

.p009 {
  width: 600px;
  height: 400px;
  border: 1px solid #fff;
  display: grid;
  grid-template-columns: calc(55% - 10px) 45%;
  grid-template-rows: 75% calc(25% - 10px);
  grid-gap: 10px;
  padding:10px;
}
.p009>div {
  background-color: red;
  text-align: center;
  border: 1px solid black;
}

.item2Cover {
  grid-column: 2/3;
  grid-row: 1/3;
}


/** CONTROL **/
.item3Control{
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-gap: 10px;
  padding:10px;
}
.item3Control > div{
  border: 1px solid black;
  align-self: center;
  justify-self: center;
  
}
.prevB{
  grid-column: 1/2;
}
.playB{
  grid-column: 2/4;
}
.nextB{
  grid-column: 4/5;
}
.suffB{
  grid-column: 9/10;
}
.volmB{
  grid-column: 10/11;
}
/** END CONTROL **/

/** PANEL **/
.item1Panel > div.row{
  height:70px;
  border:1px solid white;
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-gap: 5px;
  grid-template-areas:
    'a b b b . d e f g'
    'a c c c . d e f g'
    'h h h h h h h h h';
}
.item1Panel > div.row > div{
  border: 1px solid black;
  padding:5px;
}
.playRowB{
  grid-area: a;
}
.titleRow{
  grid-area: b;
}
.artistRow{
  grid-area: c;
 }
.dlRow{
  grid-area: d;
}
.linkRow{
  grid-area: e;
}
.repeatRow{
  grid-area: f;
}
.timeRow{
  grid-area: g;
}
.barRow{
  grid-area: h;
}

/** END PANEL **/

JavaScript

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

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