JSFiddle - React, Tailwind, and code Playground

by abuhamzah

HTML

<a href="#" class="slide" onclick="firstclick();">Show First</a> ...  
<a href="#" class="slide1" onclick="secondclick();">Show Second</a>  

<div id="one" class="content">one</div>
<div id="second" class="content">two</div>

JavaScript

function firstclick() {
            $('#second').hide();
            $('#one').slideToggle(400, function () {
                if ($(this).is(":visible")) {
                    $('.slide').text('Hide First');
                    $('.slide1').text('Show Second');
                }
                else {
                    $('.slide').text('Show First');
                }
            });
            return false;

        }
        function secondclick() {
            $('#one').hide();
            $('#second').slideToggle(400, function () {

                if ($(this).is(":visible")) {
                    $('.slide1').text('Hide Second');
                    $('.slide').text('Show First');
                }
                else
                    $('.slide1').text('Show First');

            });
            return false;
        }

        $(document).ready(function () {
            // Hide the "view" div.
            $('#one').hide();
            $('#second').hide();

        });