JSFiddle - React, Tailwind, and code Playground

by mqchen

HTML

<ul class="expandable-checklist">
    <li class="expandable-checklist-item">
        <label class="expandable-checklist-label" for="option1">Hello label</label>
        <input type="radio" id="option1" name="a" class="expandable-checklist-input" />
        <div class="expandable-checklist-full">
            <div class="expandable-checklist-text">
                <p>Hello world</p>
            </div>
        </div>
    </li>
    <li class="expandable-checklist-item">
        <label class="expandable-checklist-label" for="option2">Hello label</label>
        <input type="radio" id="option2" name="a" class="expandable-checklist-input" />
        <div class="expandable-checklist-full">
            <div class="expandable-checklist-text">
                <p>Hello world</p>
            </div>
        </div>
    </li>
    <li class="expandable-checklist-item">
        <label class="expandable-checklist-label" for="option3">Hello label</label>
        <input type="radio" id="option3" name="a" class="expandable-checklist-input" />
        <div class="expandable-checklist-full">
            <div class="expandable-checklist-text">
                <p>Hello world</p>
            </div>
        </div>
    </li>
</ul>


<ul class="expandable-checklist">
    <li class="expandable-checklist-item">
        <label class="expandable-checklist-label" for="optiona">Hello label</label>
        <input type="checkbox" id="optiona" name="b" class="expandable-checklist-input" />
        <div class="expandable-checklist-full">
            <div class="expandable-checklist-text">
                <p>Hello world</p>
            </div>
        </div>
    </li>
    <li class="expandable-checklist-item">
        <label class="expandable-checklist-label" for="optionb">Hello label</label>
        <input type="checkbox" id="optionb" name="c" class="expandable-checklist-input" />
        <div class="expandable-checklist-full">
            <div class="expandable-checklist-text">
                <p>Hello...

CSS

.expandable-checklist {
    padding: 0;
    border-bottom: 1px solid #e1e1e1;
}
    .expandable-checklist-item {
        position: relative;
        overflow: hidden;
        list-style-type: none;
        margin: 0;
        padding: 10px;
        background-color: #f9f9f9;
        border: 1px solid #e1e1e1;
        border-bottom: 0;
        -webkit-box-shadow: inset 0 0 1px 1px #fff;
        box-shadow: inset 0 0 1px 1px #fff;
    }

    .expandable-checklist-label {
        display: block;
        margin-left: 30px;
    }

    .expandable-checklist-input {
        position: absolute;
        left: 10px;
        top: 10px;
    }

    .expandable-checklist-input ~ .expandable-checklist-full {
        position: relative;
        z-index: 100;
        margin-top: 10px;
        margin-left: -11px;
        margin-right: -11px;
        margin-bottom: -11px;
        padding: 10px 10px 10px 10px;
        padding-top: 0;
        padding-bottom: 0;
        border: 1px solid #cdcdcd;
        background-color: #f2f2f2;
        -webkit-box-shadow: inset 0 0 1px 5px rgba(167, 167, 167, 0.05);
        box-shadow: inset 0 0 1px 5px rgba(167, 167, 167, 0.05);
    
        max-height: 0;
        opacity: 0;
    
        transition: all 0.5s ease;
    }

    .expandable-checklist-input:checked ~ .expandable-checklist-full {
        max-height: 1000px;
        opacity: 1;
        padding: 10px 10px 10px 10px;
    }

    .expandable-checklist-text {
        padding-left: 30px;
    }