JSFiddle - React, Tailwind, and code Playground

by Pratik Bhonsle

HTML

<html>
<head>
</head>
<body>
  <div id="button_toggle"><a href="" id="button-selector">Hide buttons</a></div>
  <div id="buttons">
    <button id="small-text">Small</button>
    <button id="medium-text">Medium</button>
    <button id="large-text">Large</button>
  </div>
</body>
</html>

CSS

.small-text {font-size: x-small}
  .medium-text {font-size: small}
  .large-text {font-size: medium}
  #buttons.hidden {display: none}
  #buttons.shown {display: normal}
  #button_toggle {padding: 1em;}

JavaScript

$(document).ready(function() {
    $('#button-selector').click(function(e) {
        e.preventDefault();
        $('#buttons').toggleClass('hidden');
        $('#button_toggle').toggle(function() {
            $('a#button-selector').text('Show Buttons');
            alert('1');
        }, function() {
            $('a#button-selector').text('Hide Buttons');
            alert('2');
        });
    });
});