JSFiddle - React, Tailwind, and code Playground

HTML

<div id="settings-content" class="hover-content">
    <div class="setting-expandable">Panels to display<span class="expand-button pointer" data-expanded="true">-</span>

        <div class="hide expand-content">
            <label class="pointer">YouTube - LinusTechTips
                <input type="checkbox" class="display-none setting" data-setting="panel.yt.ltt"><span class="toggle"></span>

            </label>
            <br/>
            <label class="pointer">YouTube - TechQuickie
                <input type="checkbox" class="display-none setting" data-setting="panel.yt.tq"><span class="toggle"></span>

            </label>
            <br/>
            <label class="pointer">YouTube - Channel Superfun
                <input type="checkbox" class="display-none setting" data-setting="panel.yt.csf"><span class="toggle"></span>

            </label>
            <br/>
        </div>
    </div>
</div>

CSS

.toggle {
    height: 13px;
    margin: 3px 0;
    position: absolute;
    right: 10px;
    width: 27px;
    background-color:grey;
}
.toggle::after {
    background - color: red;
    content:"";
    height: 13px;
    position: absolute;
    right: 0;
    width: 13px;
    transition: 0.2s linear all;
    background-color:green;
}
.expand-content {
    margin-left: 10px;
    margin-top:3px;
    overflow:hidden
}
.hover-content {
    position: absolute;
    width: 500px;
    background-color: inherit;
    border: 2px black solid;
    border-radius: 14px;
    padding: 5px;
    display: block;
}
.setting-expandable {
    position:relative;
    overflow:hidden;
}

JavaScript

$(".expand-button").click(function () {
    var $this = $(this);
    if ($this.attr("data-expanded") === "true") {
        $this.text("+").attr("data-expanded", "false").siblings(".expand-content").slideUp(1000);
    } else {
        $this.text("-").attr("data-expanded", "true").siblings(".expand-content").slideDown(1000);
    }
});