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;
    }

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);
	}
});