JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div id="wotp">

<span onclick="wotp();">What's On This Page?</span>

<div id="wotp_x" class="wotp_hidden">

<div id="wotp_content">
<ol>
<li><a href="#">Donec pharetra nulla eget metus fermentum malesuada.</a></li>
<li><a href="#">A very long item name here for you to read</a></li>
<li><a href="#">Aenean nec lacinia eros, vitae ullamcorper augue.</a></li>
<li><a href="#">Duis ac enim ac justo sagittis finibus in sed justo.</a></li>
<li><a href="#">Donec sagittis pellentesque nulla sit amet suscipit. Praesent diam massa, auctor non sagittis a, varius eget tellus.</a></li>
<li><a href="#">In ultrices, magna vel commodo sollicitudin, ante lacus convallis arcu, vel auctor nunc mauris mattis odio.</a></li>
<li><a href="#">Aenean erat enim, luctus sed libero non, mollis blandit augue.</a></li>
<li><a href="#">Donec pharetra nulla eget metus fermentum malesuada.</a></li>
<li><a href="#">A very long item name here for you to read</a></li>
<li><a href="#">Aenean nec lacinia eros, vitae ullamcorper augue.</a></li>
<li><a href="#">Duis ac enim ac justo sagittis finibus in sed justo.</a></li>
<li><a href="#">Donec sagittis pellentesque nulla sit amet suscipit. Praesent diam massa, auctor non sagittis a, varius eget tellus.</a></li>
<li><a href="#">In ultrices, magna vel commodo sollicitudin, ante lacus convallis arcu, vel auctor nunc mauris mattis odio.</a></li>
<li><a href="#">Aenean erat enim, luctus sed libero non, mollis blandit augue.</a></li>
</ol>
</div>

</div>

</div>

<p>
In ultrices, magna vel commodo sollicitudin, ante lacus convallis arcu, vel auctor nunc mauris mattis odio. Sed vel justo et nulla rhoncus mollis. Donec sagittis pellentesque nulla sit amet suscipit. Praesent diam massa, auctor non sagittis a, varius eget tellus. Nulla non mattis risus, eu eleifend risus. Aenean viverra, tellus sed hendrerit finibus, sapien erat ullamcorper erat, quis pharetra magna lorem nec urna. Phasellus orci lacus, aliquet et ex vel, viverra finibus arcu. Morbi vel sapien...

CSS

#wotp {display:inline-block;min-width:300px;max-width:500px;color:#666666;font-family:Arial;}

#wotp span {display:block;padding:15px;cursor:pointer;border:1px solid #cccccc;border-radius:5px 5px 0 0;}

#wotp span::after {content:"|||";float:right;transform: rotate(90deg);color:#bbbbbb;}

.wotp_hidden {height:0;overflow:hidden;transition: all 0.5s ease;border:solid #cccccc;border-width:0 1px;}

.wotp_shown {overflow:hidden;transition: all 0.5s ease;border:solid #cccccc;border-width:0 1px 1px 1px;border-radius:0 0 5px 5px;}

#wotp_content {display:block;padding:15px 0 0 0;}

#wotp_content ol {display:block;margin:0;padding:0 30px;}
#wotp_content ol li {margin:0;padding:0 0 15px 0;}
#wotp_content ol li a {display:block;text-decoration:none;color:#666666;}
#wotp_content ol li a:hover {text-decoration:underline;}

JavaScript

function wotp() {
var content = document.getElementById('wotp_content');
var height = content.clientHeight;



var wot = document.getElementById('wotp_x');

if (wot.className == "wotp_hidden") {wot.className = "wotp_shown";wot.style.height = height + 'px'; } else {wot.className = "wotp_hidden";wot.style.height = 0 + 'px';}

}