JSFiddle - React, Tailwind, and code Playground

by Per Ă…strand

HTML

<ul class="options-list">
    <li class="option active">
        FORM FIELD 1
        <div class="panel active-panel">
            <div class="form-field">
                <label class="form-label black">Sub Field</label> 
                <input class="form-input" type="text" />
            </div>
            <div class="form-field flt">
                <label class="form-label black">Sub Field</label> 
                <input class="form-input half" type="text" />
                <input class="form-input half" type="text" />
            </div>
            <div class="form-field flt">
                <label class="form-label black cvc">Sub Field</label> 
                <input class="form-input half" type="text" />
            </div>
        </div>
    </li>
    <li class="option">
        FORM FIELD 2
        <div class="panel"></div>
    </li>
    <li class="option">
        FORM FIELD 3
        <div class="panel"></div>
    </li>
</ul>

CSS

.options-list {
    border: 1px solid #d5d6d7;
    padding: 0;
    margin-bottom: 30px;
}
.option {
    list-style: none;
    border-bottom: 1px solid #dadada;
    font: 16px/56px avenir_65regular !important;
    color: #333;
}
.options-list .option.active {
    color: #004ebc;
}
.options-list .option.active:before {
    background-color: #004ebc !important;
    border: 5px solid #83ace0 !important;
}
.options-list .option:before {
    content: "";
    background-color: #fff;
    border-radius: 16px;
    border: 5px solid #004ebc;
    height: 18px;
    margin: 0 10px;
    width: 18px;
    position: relative;
    top: 3px;
    box-sizing: border-box;
    display: inline-block;
}
.panel {
    height: 0;
    overflow: hidden;
    background: #f9f9f9;
    border-top: 1px solid #d5d6d7;
    transition: all 0.5s linear;
    transition: height 0.25s ease-in-out;
    /* visibility: hidden; */
    /* opacity: 0; */
    /* transition: visibility 0s, opacity 0.5s linear; */
}

.option.active > .panel {
    /* visibility: visible; */
    /* opacity: 1; */
    height: 100%;
    padding: 25px 10px;
}

JavaScript

$(function() {
    $('.options-list li').click(function(evt){
        $(this).toggleClass('active');
        $(this).parent().children('li').not(this).removeClass('active');
    });
    
    $('.options-list li .panel').click(function(evt){
        evt.preventDefault();
        return false;
    });
});