jQuery toggleClass example

Toggle class name on click in jQuery

by rough cheap

HTML

<table>
  <tr>
    <th>A</th>
    <th>B</th>
  </tr>
  <tbody class="partA">
    <tr>
      <td>Comment</td>
      <td>Comment</td>
    </tr>
  </tbody>
  <tbody class="partB">
    <tr>
      <td>CommentB</td>
      <td>CommentB</td>
    </tr>
  </tbody>
</table>

<button id="clickme">
  Click Me!
</button>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

JavaScript

$(function() {
  $('.partA').show();
  $('.partB').hide();

  $('#clickme').on('click', function() {
  	alert('hide');
    $('.partA').hide();
    $('.partB').show();
  });
});