JSFiddle - React, Tailwind, and code Playground

HTML

<div id="top"></div>
<header>
<a href="#one"><div>One</div></a>
<a href="#two"><div>Two</div></a>
<a href="#three"><div>Three</div></a>
<a href="#four"><div>Four</div></a>
</header>

<div class="main">
    <div class="one">
        <a id="one">
            <div class="bar">
                <span>WORD</span>
            </div>
        </a>
        <div class="full">
            <div class="left">LEFT</div>
            <p><a href="#top">Top</a></p>
            <div class="right">RIGHT</div>
        </div>
    </div>
    <div class="two">
        <a id="two">
            <div class="bar">
                <span>WORD</span>
            </div>
        </a>
        <div class="full">
            <div class="left">LEFT</div>
            <p><a href="#top">Top</a></p>
            <div class="right">RIGHT</div>
        </div>
    </div>
    <div class="three">
        <a id="three">
            <div class="bar">
                <span>WORD</span>
            </div>
        </a>
        <div class="full">
            <div class="left">LEFT</div>
            <p><a href="#top">Top</a></p>
            <div class="right">RIGHT</div>
        </div>
    </div>
    <div class="four">
        <a id="four">
            <div class="bar">
                <span>WORD</span>
            </div>
        </a>
        <div class="full">
            <div class="left">LEFT</div>
            <p><a href="#top">Top</a></p>
            <div class="right">RIGHT</div>
        </div>
    </div>
</div>

CSS

.main { display: block; width: 500px; }
.one, .two, .three, .four { display: block; margin-top: 10px; border: solid 1px #000; overflow: hidden; }
.bar { cursor: pointer; text-align: center; background-color: #000; width: 500px; height: 35px; color: #fff; }
.full { display: block; height: 400px; overflow: hidden; }
.close { display: none; }
header { display: block; width: 500px; }
header div { padding: 5px 0 5px 0; background-color: #eee; text-align: center; width: 25%; float: left; }
.full .left { display: inline-block; float: left; background-color: #eee; width: 65%; height: 100%; overflow: hidden; }
.full .right { display: inline-block; float: left; background-color: #ccc; width: 35%; height: 100%; overflow: hidden; }

JavaScript

$(function() {
	  $('a[href*=#]:not([href=#])').click(function() {
	    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {

	      var target = $(this.hash);
	      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
	      if (target.length) {
	        $('html,body').animate({
	          scrollTop: target.offset().top
	        }, 1000);
	        return false;
	      }
	    }
	  });
	});
    
$(document).ready(function() {
    $('.bar').click(function() {
        $(this).closest('a').siblings('div').toggle(600);
});

/*
$("button").click(function(){
    $("p").toggle();
    });
*/    
});