JSFiddle - React, Tailwind, and code Playground

by Amit Vishwakarma

HTML

<label for="toggle1" class="toggle-label">FOLD/UNFOLD</label>
			<label for="toggle2" class="toggle-label">FOLD/UNFOLD</label>
			<label for="toggle3" class="toggle-label">CLOSE</label>
      <input type="radio" name="xinfo" class="toggle" id="toggle3"/>

	
			<div class="content">
				<aside class="folder">
					<input type="radio" name="xinfo" class="toggle" id="toggle1"/>
					<div class="fold">Element 1</div>
				</aside>

				<aside class="folder">
					<input type="radio" name="xinfo" class="toggle" id="toggle2"/>
					<div class="fold">Element 2</div>
				</aside>
				
			</div>

CSS

.folder {
    	width: 100%;
    	visibility: hidden;
    }

    .fold {
    	visibility: hidden;
    	background-color: #8b0000;
    	width: 60%;
    	height: 0px;
    	color: transparent;
    	-webkit-transition: all 0.3s;
    	-moz-transition: all 0.3s;
    	transition: all 0.3s;
    	position: absolute;
    }

    .toggle { display: none; }

    .toggle-label {
    	display: inline-block;
    	cursor: pointer;
    	margin-top: 10px;
    	margin-bottom: 10px;
    	border: 1px solid #fff;
    	font-size: 11px;
    	color: #999;
    	background-color: #8b0000;
    	padding: 5px;
    }

    .toggle-label:hover {
    	background-color: #400000;
    }

    .toggle:checked ~ .fold {
    	height: 80px;
    	visibility: visible;
    	color: #fff;
    }

    .content{
    	width: 100%;
    	min-height: 0;
    	position: static;
    	-webkit-transition: all 0.3s;
    	-moz-transition: all 0.3s;
    	transition: all 0.3s;
    }

    .toggle:checked ~ .content {
    	min-height: 80px;
    }
    
    
    #toggle3:checked + .content .fold
    {
      visibility: hidden;
    }