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">
        1ddddddddddddddddd-Lorem Ipsum is simply dummy text of the printing and typesetting
        industry. Lorem Ipsum has been the industry's standard dummy text ever since the
        1500s, when an unknown printer took a galley of type and scrambled it to make a
        type specimen book. It has survived not only five centuries, but also the leap into
        electronic typesetting, remaining essentially unchanged. It was popularised in the
        1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
        recently with desktop publishing software like Aldus PageMaker including versions
        of Lorem Ipsum.
        <br />
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
        Ipsum has been the industry's standard dummy text ever since the 1500s, when an
        unknown printer took a galley of type and scrambled it to make a type specimen book.
        It has survived not only five centuries, but also the leap into electronic typesetting,
        remaining essentially unchanged. It was popularised in the 1960s with the release
        of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
        publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        <br />
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
        Ipsum has been the industry's standard dummy text ever since the 1500s, when an
        unknown printer took a galley of type and scrambled it to make a type specimen book.
        It has survived not only five centuries, but also the leap into electronic typesetting,
        remaining essentially unchanged. It was popularised in the 1960s with the release
        of Letraset sheets containing...

CSS

*
        {
            font-family: Arial, Helvetica, sans-serif;
            font-size: 12px;
        }
        
        div#one, div#second
        {
            height: 120px;
            overflow: auto;
        }
        
        .content
        {
            width: 400px;
            height: 200px;
            margin: 0px auto;
            padding: 20px;
            border: 1px dotted #999999;
            overflow: hidden;
            text-align: justify;
            padding: 10 0 0 0;
            margin-top: 10px;
            margin-left: 5px;
        }
        
        #one
        {
            overflow-y: scroll;
            padding: 15px;
            height: 150px;
            line-height: 25px;
        }
        
        #second
        {
            overflow-y: scroll;
            padding: 15px;
            height: 150px;
            line-height: 25px;
        }
        
        span a
        {
            padding-right: 15px;
            padding-left: 15px;
            color: blue;
            text-decoration: none;
        }
        
        span a:hover
        {
            padding-right: 15px;
            color: blue;
            text-decoration: none;
        }

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();

        });