JSFiddle - React, Tailwind, and code Playground

by Mehmet Demiray

HTML

<div id="page">
    <!-- Home Page -->
    <section id="home" class="home">
        Home
        <button id="toggle">Click</button>
    </section>

    <!-- About Page -->
    <section id="about" class="about hidden">
        About
        <button id="toggleClose">Click</button>
    </section>
</div>

CSS

.hidden {
    visibility: hidden;
}

.show {
    visibility: visible;
}

.about {
    width: 100%;
    height: 100%;
    position: absolute;
    top:0;
    left:0;
    background: #FF0000;
}

JavaScript

$(document).ready(function() {

        $("#toggle").click(function() {
            $("#about").addClass("show");
        });

        $("#toggleClose").click(function() {
            $("#about").removeClass("show");
        })

    });