JSFiddle - React, Tailwind, and code Playground

HTML

<div class="ddrp" id="ddrp_1">
    <p onClick="actDdrp(this)">Types <span>&#9660;</span></p>
    <p><input type="checkbox" name="audio" /> Audio</p>
    <p><input type="checkbox" name="video" /> Video</p>
</div>

<div class="ddrp" id="ddrp_2">
    <p onClick="actDdrp(this)">Category <span>&#9660;</span></p>
    <p><input type="checkbox" name="cat1" /> Cat 1</p>
    <p><input type="checkbox" name="cat2" /> Cat 2</p>
    <p><input type="checkbox" name="cat3" /> Cat 3</p>
</div>

CSS

.ddrp {border:1px solid #ccc; width:250px; height:32px; overflow:hidden; margin-bottom:10px;}
.ddrp p{margin:0; padding:7px;}
.ddrp p:first-child{cursor:pointer; -webkit-user-select:none; -moz-user-select:none; user-select:none;}
.ddrp p:first-child span{float:right; color:#999;}

JavaScript

function actDdrp(e){
    e=document.getElementById(e.parentNode.getAttribute('id'));
    if(e.style.height!='auto') e.style.height="auto";
    else e.style.height='32px';
}