JSFiddle - React, Tailwind, and code Playground

by Regisc

HTML

<dl>
            <dt>How are you?</dt>
            <dd>I am fine, thanks</dd>
            <dt>How are you?</dt>
            <dd>I am fine, thanks</dd>
            <dt>How are you?</dt>
            <dd>I am fine, thanks</dd>
            <dt>How are you?</dt>
            <dd>I am fine, thanks</dd>
            <dt>How are you?</dt>
            <dd>I am fine, thanks</dd>
            <dt>How are you?</dt>
            <dd>I am fine, thanks</dd>
        </dl>

CSS

body{
                text-align: center;
            }
            .hide{
                display: none;
            }

            dl{
                width: 500px;
                margin: auto;
            }

            dt{
                background: #e3e3e3;
                padding:15px;
                border-bottom: 1px dotted white;
            }

            dd{
                margin:0;
                padding:15px;
            }

JavaScript

$(document).ready(function () {
    $("dd").addClass("hide");

    $("dt").on("mouseenter", function () {
        $(this).next().slideDown().siblings('dd').slideUp();
        return false;
    });
});