jQuery addClass example

Change class name on click in jQuery

by Sampath_Madhuranga

HTML

<div class="bug-wrap">
<div class="bug-row">
    <div class="bug-container">
        <div class="bug-icon">
            &#129419;
        </div>
        <div class="bug-description">
            This is a Butterfly
        </div>
    </div>

    <div class="bug-container">
        <div class="bug-icon">
            &#128027;
        </div>
        <div class="bug-description">
            This is a Caterpillar
        </div>
    </div>
    <div class="bug-container">
        <div class="bug-icon">
            &#128375;
        </div>
        <div class="bug-description">
            This is a Spider
        </div>
    </div>
</div>

<div class="bug-row">
    <div class="bug-container">
        <div class="bug-icon">
            &#129419;
        </div>
        <div class="bug-description">
            This is a Butterfly
        </div>
    </div>
    <div class="bug-container">
        <div class="bug-icon">
            &#128029;
        </div>
        <div class="bug-description">
            This is a Honeybee
        </div>
    </div>

</div>

SCSS

.bug-wrap{
  display: flex;
  flex-flow: row wrap;

.bug-row {
  display: flex;
  flex-flow: row wrap;
  padding: 0.75rem 1.5rem;
  border: 1px solid blue;
  background: lightblue;
  font-size: 2rem;
  flex: auto;

  .bug-container {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: center;
    flex: 0 0 25%;
    padding: 0.5rem 0 0 0.5rem;


    .bug-description {
      width: 3.75rem;
      flex: auto;
      padding: 0 0.5rem;
      font-size: 0.75rem;
      line-height: 1.2;
      text-align: center;
    }
  }
}
}