JSFiddle - React, Tailwind, and code Playground

HTML

<button type="button" onclick="MyFunction1()">button1</button>
<button type="button" onclick="MyFunction2()">button2</button>

<p id="show1" class="show">This is 1.</p>
<p id="show2" class="hide">This is 2</p>

CSS

.hide {
  display: none;
}

.show {
  display: block;
}

JavaScript

function MyFunction1() {
  document.getElementById("show1").classList.add("show");
  document.getElementById("show1").classList.remove("hide");
  document.getElementById("show2").classList.remove("show");
  document.getElementById("show2").classList.add("hide");
}

function MyFunction2() {
  document.getElementById("show1").classList.remove("show");
  document.getElementById("show1").classList.add("hide");
  document.getElementById("show2").classList.add("show");
  document.getElementById("show2").classList.remove("hide");
}