JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container1" class="col-sm-6">
    <li class="list-group-item"><span>Option1</span>
        <ul id="Ul1" class="list-group">
        <br />
            <li class="list-group-item">Option1.1</li>
            <li class="list-group-item">Option1.2</li>
            <li class="list-group-item">Option1.3</li>
            <li class="list-group-item">Option1.4</li>
        </ul>
    </li>
    <li class="list-group-item"><span>Option2</span>
        <ul id="Ul2" class="list-group">
        <br />
            <li class="list-group-item">Option2.1</li>
            <li class="list-group-item">Option2.2</li>
            <li class="list-group-item">Option2.3</li>
            <li class="list-group-item">Option2.4</li>
        </ul>
    </li>
    <li class="list-group-item"><span>Option3</span>
        <ul id="Ul3" class="list-group">
        <br />
            <li class="list-group-item">Option3.1</li>
            <li class="list-group-item">Option3.2</li>
            <li class="list-group-item">Option3.3</li>
            <li class="list-group-item">Option3.4</li>
        </ul>
    </li>
</div>

JavaScript

jQuery(document).ready( function() {
	$('#Ul1, #Ul2, #Ul3').hide();
  $('#container1 > li').on('click', function() {
		$(this).addClass('selected').siblings().removeClass('selected');
  	$('.selected').children('ul').toggle();
    $('.selected').siblings().children('ul').hide();
    $('.selected').children('span').css("background-color", "#FFFF00");
    $('.selected').siblings().children('span').css("background-color", "");
  });
});