JSFiddle - React, Tailwind, and code Playground

by rjasoriano

HTML

<html>
	<head>
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.css">
		<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.js"></script>
		<title>Japan Japan Sagot Sa Kahirapan</title>
	</head>
<body>
	<div class="ui action input">
	  <input type="text" placeholder="Search...">
	  <button class="ui button">Search</button>
	</div>	
	<div id="button1">
  <button class="ui green button"><i class="icon play"></i>Play</button>
  </div>
    <div id="button2" hidden>
  <button class="ui red button" ><i class="icon stop"></i>Stop</button>
  </div>
</div>
</body>

JavaScript

$("#button1").click(function(){
	$("#button2").toggle()
  $("#button1").hide()
})

$("#button2").click(function(){
	$("#button1").toggle()
  $("#button2").hide()  
})