JSFiddle - React, Tailwind, and code Playground

by Ehsan Sajjad

HTML

<link rel="stylesheet" href="http://necolas.github.io/normalize.css/3.0.1/normalize.css">
<ul>
    <li class="checkbox">
        <label>
            <input type="checkbox" />Option 1</label>
    </li>
    <li class="checkbox">
        <label>
            <input type="checkbox" />Option 2</label>
    </li>
    <li class="checkbox last-option">
        <label>
            <input type="checkbox" />Option 3</label>
    </li>
</ul>
<form>
    <fieldset class="mobile-number phone_num">
        <input type="text" placeholder="Mobile Number" />
    </fieldset>
    <fieldset class="home-number  phone_num">
        <input type="text" placeholder="Home Number" />
    </fieldset>
</form>

CSS

body {
    padding: 20px;
}
ul {
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
}
li {
    float: left;
    width: 20%;
    background: #ebebeb;
    border-radius: 3px;
    margin-left: 2%;
}
li:first-child {
    margin: 0;
}
label {
    display: block;
    padding: 10px;
}
form {
    margin-top: 20px;
}
.active {
    background: #428600;
    color: #fff;
}
fieldset {
    border: none;
    padding: 0;
    margin-bottom: 10px;
}
.home-number {
    display: none;
}
.home-active {
    display: block;
}
.mobile-inactive {
    display: none;
}
}

JavaScript

$(function () {

    var $checks = $(':checkbox').on('change', function (e) {
        var isChecked = this.checked;
        $(this).closest('li').toggleClass('active', isChecked);
        var numChecked = $checks.filter(':checked').length;
        /* hide the numbers, then filter what needs to be shown */
        $('.phone_num').hide().filter(function(){
            if( numChecked === 3){
                return $(this).is('.home-number')
            }
        }).show()


    });
});