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)"><div class="burg"><div></div></div><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>
<h2 id="first">First Location</h2>
<p>Sed semper feugiat augue quis efficitur. Nam a libero ullamcorper, vulputate justo et, ullamcorper purus. Aenean volutpat ligula vitae sapien pretium malesuada. Nunc tristique odio sed dui imperdiet, in vestibulum magna vehicula. Quisque vel elit id metus tristique fermentum. Quisque condimentum sapien non metus feugiat aliquam. Sed in mauris ut erat congue sagittis. Maecenas velit tortor, fringilla quis mi ac, lacinia ultricies diam.
</p>
<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>
<p><a href="#top">Menu</a></p>
<h2...CSS
.container {max-width:600px;margin:auto;}
.onp p, .onp2 p {padding:0px 10px;margin:0;color:#fff;font-family:arial;font-size:14px;line-height:30px;}
.onp {background-color:#003162;display:inline-block;cursor:pointer;transition:width 0.3s ease-out 0.8s;width:150px;}
.onp2 {width:100%;transition:width 0.5s ease-out;background-color:#003A75;}
.onpi, .onpi2, .onpi a, .onpi2 a {background-color:#eee;overflow:hidden;font-family:arial;font-size:14px;color:#003162;}
.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;}
.burg {background-color:#fff;padding:4px 0;width:20px;margin:5px;float:right;}
.burg div {background-color:#fff;border:solid #003162;border-width:4px 0;height:4px;}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";}
}