JSFiddle - React, Tailwind, and code Playground

by António Almeida

HTML

<div class="demo">
    
    <div id="toggler">
        <div class="button">Selector</div>
        <div>values<br />more values</div>
    </div>
    
    <div id="toggler1">
        <div class="button">Type</div>
        <div>values</div>
    </div>
    
    <div id="toggler2">
        <div class="button">Year</div>
        <div>values<br />more values</div>
    </div>
    
    <div id="toggler3">
        <div class="button">Cost</div>
        <div>values</div>
    </div>
    
</div>

CSS

#toggler, #toggler1, #toggler2, #toggler3 {
    margin: 2px;
    float: left;
 }
 .button + div {
     border:0.5px solid #E7EBEF;
     height: auto;
     position: relative;
     overflow: auto;
     background-color: #CCC;
 }
 .button {
     color:White;
     text-align: center;
     width:112px;
     height:24px;
     line-height:24px;
     background-color:#009EE7;
 }

JavaScript

$(function () {

        $(".button").next().hide();
        
        $(".button").click(function () {
            var e = $(this).next();
            e.is(":visible") ? e.hide() : e.show();
        });
        
    });