JSFiddle - React, Tailwind, and code Playground

by Victor Troyan

HTML

<div class="box">
  <div class="one">
    <p>this is my content number 1</p>
  </div>
  
  <div class="two">
    <p>this is my content, which should show up when clicking button1</p>
  </div>
  
  <button class="button1">im a button</button>
</div>

CSS

.one,
.two {
  width: 150px;
  height: 150px;
  float: left;
  margin-left: 10px;
  margin-right: 10px;
  padding: 10px;
  background: pink;
}

.two {
  display: none;
  background: silver;
}

JavaScript

$( '.button1' ).on( 'click', function () {
    $( '.one' ).remove();
    $( '.two' ).show();
});