JSFiddle - React, Tailwind, and code Playground

by akmiecik

HTML

<button id="switch_button">to Year A: Scrutinies</button>
<div id="parent">
<div class="daily_readings">Daily Readings</div>
<div class="year_a hide show">Year A Readings</div>
</div>
<div class="bottom">bottom</div>

CSS

button#switch_button {
  float: right;
  background: #3E0A4C;
  font-size: 14px;
  border-radius: 15px;
  color: #fff;
  cursor: pointer;
}

#parent {
  background: gray;
  width: 100px;
}

.daily_readings {
  background: yellow;
}

.year_a {
  position: relative;
  background: red;
}

.show {
  visibility: visible;
}

.hide {
  visibility: hidden;
}

JavaScript

$('button#switch_button').click(function() {
    $('div.daily_readings').toggleClass('hide');
    $('div.year_a').toggleClass('hide');
     if (this.innerHTML=="to Year A: Scrutinies") this.innerHTML = "to Year C";
     else this.innerHTML = "to Year C";
});