JSFiddle - React, Tailwind, and code Playground

by rapik

HTML

<button>Toggle</button>
<div class="hide">
Lorem ipsum dolor sit amet, ius solet dignissim honestatis ad. Mea quem tibique intellegat te. Insolens deterruisset cum ea. Te omnes percipit consulatu eos. Vix novum primis salutatus no, eam denique sensibus et, his ipsum senserit ne.

Convenire tractatos et sed. Ex option appareat pericula per, ad eos ullum meliore dolores, nec corpora ponderum volutpat ut. Qui legimus verterem definiebas ea. Ne ocurreret repudiare vim, nihil incorrupte definitionem vim ex, te munere iuvaret nec. Te quaeque sensibus suscipiantur pro, est suas eirmod omittantur id.

Ut vel fastidii tacimates. Ex qui probo gubergren, eum ei legere graece, cum salutandi sententiae cu. Ad elitr honestatis quo, id adhuc menandri per. Rebum legere ea duo. Congue consul usu ei, scripta aperiam adolescens eu sit, modus eloquentiam usu ad.

Eu appareat oportere pro, ad indoctum splendide laboramus pri. Ludus quaestio in cum, mel magna putant tibique ex. Dicta praesent eu nam, eu est modo veri iusto. Qui erant essent et, aliquip mentitum id sed. Eum ponderum voluptaria ne. Accumsan nominati incorrupte no sea, ad nonumes ceteros nam, quem feugait propriae te nam.

Ea eum copiosae convenire. Te duo errem dissentias, id dolor philosophia mel. Nec id dolorum mentitum vituperatoribus, quas essent ut eos. Aperiam appareat fabellas sit te.

Nam no saepe nostrum conclusionemque, sea ex ludus percipitur conclusionemque. Cu laudem tempor mea, purto inermis vix an. Per stet epicuri eloquentiam eu, vix ei debet feugait. Ne nam veritus delicata, laudem quaeque suscipit cu has.

Solum oratio phaedrum eu duo, qui mundi disputando complectitur te. Audire noluisse urbanitas eum ei, eu vel nemore insolens pericula. Nihil libris possim mei et, vis decore animal no. Vix ex nibh graeco, cu justo epicuri epicurei per. Duis nostrud probatus his ei, est ne viris laoreet, ad wisi docendi menandri mea.

Id laoreet oportere accommodare vis, mei ex summo nobis integre. Mazim accumsan...

CSS

div {    
    max-height: 20000px;
    transition: max-height 3000ms;
    overflow-y: hidden;
}

.hide {
    max-height: 0;
    transition: none;
}

JavaScript

document.querySelector("button").addEventListener(
	"click", 
  function(){
  	document.querySelector("div").classList.toggle("hide");
	}
)