JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="fiddle">Dropdown Links</div>

<div class="case">

<div class="switch"><div id="arrow" class="arrow"></div><h2>Click here to open me</h2></div>

<div class="panel"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam erat volutpat. Phasellus vitae diam tempor, laoreet nulla sed, pharetra dolor. Vivamus in odio nec tortor congue sollicitudin eu porta leo. Suspendisse pulvinar libero et commodo tristique. Suspendisse at orci lacinia nulla euismod auctor in sed mauris.</p><p>In consectetur pharetra ligula, eu eleifend lorem aliquam quis. Cras accumsan ex eget fringilla lobortis. Integer porttitor mauris nec felis placerat porttitor.</p></div>


<div class="switch"><div id="arrow" class="arrow"></div><h2>What does this do?</h2></div>

<div class="panel"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam erat volutpat. Phasellus vitae diam tempor, laoreet nulla sed, pharetra dolor. Vivamus in odio nec tortor congue sollicitudin eu porta leo. Suspendisse pulvinar libero et commodo tristique. Suspendisse at orci lacinia nulla euismod auctor in sed mauris.</p><p>In consectetur pharetra ligula, eu eleifend lorem aliquam quis. Cras accumsan ex eget fringilla lobortis. Integer porttitor mauris nec felis placerat porttitor.</p></div>


<div class="switch"><div id="arrow" class="arrow"></div><h2>Does this scroll down?</h2></div>

<div class="panel"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam erat volutpat. Phasellus vitae diam tempor, laoreet nulla sed, pharetra dolor. Vivamus in odio nec tortor congue sollicitudin eu porta leo. Suspendisse pulvinar libero et commodo tristique. Suspendisse at orci lacinia nulla euismod auctor in sed mauris.</p><p>In consectetur pharetra ligula, eu eleifend lorem aliquam quis. Cras accumsan ex eget fringilla lobortis. Integer porttitor mauris nec felis placerat porttitor.</p></div>

</div>

CSS

.fiddle {background-color:#000;color:#fff;padding:2px 6px;margin:0 0 10px 0;}

.case {}

.switch {padding-left:10px;line-height:40px;border:1px solid #999;border-bottom:none;border-radius:5px 5px 0 0;}
.switch:hover {background-color:#dedede;}

.switch h2 {font-weight:bold;font-family:arial;font-size:16px;line-height:40px;margin:0;}

.panel {font-family:arial;padding:0 10px;max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
border:1px solid #999;border-top:none;margin:0 0 4px 0;border-radius:0 0 5px 5px;
}
    
.arrow {position: relative;overflow: hidden;width:40px;height:40px;float:right;background:url('data:image/gif;base64,R0lGODlhCgAKAIAAAP///5mZmSH5BAEHAAAALAAAAAAKAAoAAAIRhG8RiMrnHoiPMtuWVLz7rxQAOw==') center center no-repeat;
-webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  transition:             transform 550ms ease;
        -moz-transition:    -moz-transform 550ms ease;
        -ms-transition:     -ms-transform 550ms ease;
        -o-transition:      -o-transform 550ms ease;
        -webkit-transition: -webkit-transform 550ms ease;}
  .arrow2 {
    position: relative;overflow: hidden;width:40px;height:40px;float:right;background:url('data:image/gif;base64,R0lGODlhCgAKAIAAAP///5mZmSH5BAEHAAAALAAAAAAKAAoAAAIRhG8RiMrnHoiPMtuWVLz7rxQAOw==') center center no-repeat;
    -webkit-transform: rotate(225deg);
  -moz-transform: rotate(225deg);
  -ms-transform: rotate(225deg);
  -o-transform: rotate(225deg);
  transform: rotate(225deg);
  transition:             transform 550ms ease;
        -moz-transition:    -moz-transform 550ms ease;
        -ms-transition:     -ms-transform 550ms ease;
        -o-transition:      -o-transform 550ms ease;
        -webkit-transition: -webkit-transform 550ms ease;}
  }

JavaScript

// Dropdown Links

var acc = document.getElementsByClassName("switch");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    
var panel = this.nextElementSibling;
    if (panel.style.maxHeight){
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
 
var box = this.firstChild;

if (box.className == "arrow")

{box.className = "arrow2";}

else {box.className = "arrow";} 
    
  }
}