JSFiddle - React, Tailwind, and code Playground

by Thet Hlaing

HTML

<div class="ddlstylecheckbox">
    <div class="cb-container">
        
        <input type="checkbox" name="myknow[]" id="myknow_0" title="Choose at least one" value="existing-client" class="validate['group[41]']" style="
    /* visibility: hidden; */
    background-color: Red;
">
<label for="myknow_0">Existing Client</label></div>
        
<div class="cb-container"><input type="checkbox" name="myknow[]" id="myknow_1" title="Choose at least one" value="fliers-posters" class="validate['group[41]']">
<label for="myknow_1">Fliers/Posters</label></div>
<div class="cb-container"><input type="checkbox" name="myknow[]" id="myknow_2" title="Choose at least one" value="refer-friend" class="validate['group[41]']" style="
    /* display: none; */
">
<label for="myknow_2">Referral by friend</label></div>
<div class="cb-container"><input type="checkbox" name="myknow[]" id="myknow_3" title="Choose at least one" value="email" class="validate['group[41]']">
<label for="myknow_3">Emailers</label></div>
<div class="cb-container"><input type="checkbox" name="myknow[]" id="myknow_4" title="Choose at least one" value="newspaper" class="validate['group[41]']">
<label for="myknow_4">Newspaper News</label></div>
<div class="cb-container"><input type="checkbox" name="myknow[]" id="myknow_5" title="Choose at least one" value="mag-ad" class="validate['group[41]']">
<label for="myknow_5">Magazine Ad</label></div>
<div class="cb-container"><input type="checkbox" name="myknow[]" id="myknow_6" title="Choose at least one" value="mag-news" class="validate['group[41]']">
<label for="myknow_6">Magazine News</label></div>
<div class="cb-container"><input type="checkbox" name="myknow[]" id="myknow_7" title="Choose at least one" value="facebook" class="validate['group[41]']">
<label for="myknow_7">Facebook</label></div>
<div class="cb-container"><input type="checkbox" name="myknow[]" id="myknow_8" title="Choose at least one" value="gynae" class="validate['group[41]']">
<label...

CSS

.ddlstylecheckbox{
    float:left; 
    clear:none;
    overflow: hidden;
    position: absolute;
    height: 30px;
    background-color: #fff;
    z-index: 5;
    margin-left: 154px;
    border-radius:5px;
    border: 1px solid #ccc;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
    -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
}

.ddlstylecheckbox.show{
    height:auto;
}

.ddlstylecheckbox:before{
    content:"Select all that applied";
    padding: 6px 10px;
    display: block;
    border-bottom:1px dotted #F5F5F5;
}

.ddlstylecheckbox:after{
    background:url('http://report.nih.gov/images/dropdown_arrow.gif') no-repeat;
    content:"";
    width:20px;
    height:20px;
    background-size:100%;
    position:absolute;
    top: 5px;
    right: 8px;
}

label {
    font-size: 15px;
    font-weight: 400;
    width: 200px;
}

input[type="checkbox"], input[type="radio"] {
    padding: 0 0 0 0 !important;
    background-color: Red;
    border-color: transparent;
    margin: 10px 5px 10px 5px;
    clear: none;
}

.cb-container input[type=checkbox]{
    display:none;
}

.ddlstylecheckbox input[type=checkbox]:checked ~ label{
    background-color:#A1A1A1;         
}

.ddlstylecheckbox label{
    display:block;
    padding:5px 10px;
}

.ddlstylecheckbox label:hover{
    background-color:#F5F5F5;
}

JavaScript

$('.ddlstylecheckbox').click(function(event){     
    var target = $(event.target);    
    if(target.is( "div" ))
    {
        $('.ddlstylecheckbox').toggleClass("show");
    }
});