JSFiddle - React, Tailwind, and code Playground

by hicurin

HTML

<input type="checkbox" name="bookList" value="book2" id="bookList_2">

  <div class="bookInfo" id="infoBox">
testetstetwtasdljas;ilsajdlaisjdiasjdiaojwiejasdjlsjd<br>
testetstetwtasdljas;ilsajdlaisjdiasjdiaojwiejasdjlsjd<br>
testetstetwtasdljas;ilsajdlaisjdiasjdiaojwiejasdjlsjd<br>
testetstetwtasdljas;ilsajdlaisjdiasjdiaojwiejasdjlsjd<br>
      </div>

CSS

.bookInfo {
width: 500px;
font-size: 2em;
height: 0px;
overflow: hidden;
-webkit-transition: height 2s, width 2s;
-moz-transition: height 2s, width 2s;
-ms-transition: height 2s, width 2s;
-o-transition: height 2s, width 2s;
transition: height 2s, width 2s;    
}

JavaScript

document.getElementById('bookList_2').onclick = function(){
    if(this.checked){
        document.getElementById('infoBox').style.height = '200px';
    }
    else{
      document.getElementById('infoBox').style.height = '0px';
    }
}