JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div id="top" class="container"><h1>On This Page Button</h1>

<div id="onp" class="onp" onclick="tog(onp,onpi)"><p>On This Page</p></div>
<div id="onpi" class="def2 onpi">
<ul>
<li><a href="#first">First Location</a></li>
<li><a href="#second">Second Location</a></li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
</ul>
</div>

<p>
Phasellus eleifend vestibulum mi, in convallis mi varius euismod. Quisque sit amet posuere ex. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam erat volutpat. Etiam consectetur luctus dolor eget varius. Duis fringilla aliquet magna, at pellentesque sapien finibus sit amet. Donec placerat tellus sed porta facilisis. Vivamus et diam non ante vulputate sagittis sit amet eu ipsum. Vivamus porta eros id odio cursus, et lobortis lorem accumsan.</p>

CSS

.container {max-width:600px;margin:auto;}

.onp span {float:right;display:none;}

.onp p, .onp2 p {padding:0;margin:0;color:#555555;font-family:arial;font-size:14px;line-height:20px;border:solid #555555;border-width:1px;}

.onp {cursor:pointer;transition:width 0.3s ease-out 0.8s;width:120px;text-align:center;margin:auto;}

.onp2 {width:100%;transition:width 0.5s ease-out;}

.onpi, .onpi2, .onpi a, .onpi2 a {overflow:hidden;font-family:arial;font-size:14px;color:#003162;}
.onpi, .onpi2 {border:solid #555555;border-width:0 1px;background-image:url('data:image/gif;base64,R0lGODlhAQABAIAAAFVVVf///yH5BAAHAP8ALAAAAAABAAEAAAICRAEAOw==');background-repeat: repeat-x;background-position: center bottom;}

.onpi ul, .onpi2 ul {margin:0;padding:0;}

.def2 li {padding:0 0 0 10px;line-height:30px;transition:height 0.5s ease-out 0.5s, opacity 0.5s ease-out 1s;opacity:0;}
.onpi li {height:0px;transition:height 0.3s ease-out 0.5s, opacity 0.5s ease-out 0s;}
.onpi2 li {height:30px;opacity:1;}

JavaScript

function tog(el,el2){
if(el.className == "onp"){el.className = "onp onp2";}
else {el.className = "onp";}
if(el2.className == "def2 onpi"){el2.className = "def2 onpi2";}
else {el2.className = "def2 onpi";}

}