JSFiddle - React, Tailwind, and code Playground

by Bhumika107

HTML

<div class="cheese">
  <div class="option1">Option 1</div>
  <div class="option2">Option 2</div>
  <div class="option3">Option 3</div>
</div>

<div class="box">
  <div class="content one">Content One</div>
  <div class="content two">Content Two</div>
  <div class="content three">Content Three</div>

</div>

CSS

.cheese {
  height: 200px;
  width: 300px;
  background: blue;
}

.cheese div {
  color: white;
  background: red;
}

.box {
  height: 300px;
  width: 500px;
}

.box .content {
  display: none;
}

JavaScript

$('.option1').click(function() {
  $('.box').children().not(":hidden").stop().fadeOut(1000, function() {

    $('.one').stop().fadeIn();
  });
});
$('.option2').click(function() {
  $('.box').children().not(":hidden").stop().fadeOut(1000, function() {
    $('.two').stop().fadeIn();
  });

});
$('.option3').click(function() {
  $('.box').children().not(":hidden").stop().fadeOut(1000, function() {
    $('.three').stop().fadeIn();
  });

});
$('.box').children().eq(0).show();