JSFiddle - React, Tailwind, and code Playground

by mori57

HTML

<dl class="serviceOption"> 
        <dt>
             <input type="radio" name="serviceOptions" id="option01" value="value01">
             <label for="option01">Option 1</label>
         </dt> 
        <dd>Show more information on Option 1</dd> 
        <dt>
             <input type="radio" name="serviceOptions" id="option02" value="value02">
             <label for="option02">Option 2</label>
         </dt>
    
        <dd>Show more information on Option 2</dd> 
        <dt>
             <input type="radio" name="serviceOptions" id="option03" value="value03">
             <label for="option03">Option 3</label>
         </dt>
    
        <dd>Show more information on Option 3</dd> 
        <dt>
             <input type="radio" name="serviceOptions" id="option04" value="value04">
             <label for="option04">Option 4</label>
        </dt>
        <dd>Show more information on Option 4</dd>
    </dl>

CSS

.serviceOption {
        border:1px solid green;
    }
    .serviceOption dt {
        border:1px dotted red;
    }
    .serviceOption dt label {
        background:rgba(122,122,135,.5);
    }
    .serviceOption dd {
        display:none;
    }

JavaScript

var terms = $(".serviceOption dt input");
    
    terms.click(function (evt) {
        var clickedDT = $(this).closest("dt");
        if ($("dd:visible").length > 0) {
            $("dd:visible").slideUp(400, function () {
                $(clickedDT).next("dd").slideDown();
            });
        } else {
            $(clickedDT).next("dd").slideDown();
        }
    });