JSFiddle - React, Tailwind, and code Playground

HTML

<div id="background_absolute_content">
    <div class="test">
        <ul>
            <li>
                <span>Config</span>
                <div class="toggle_hide">
                    <p>UPDATES</p>
                    <ul>
                        <li><p>22 FaceBook updates</p></li>
                        <li><p>22 FaceBook updates</p></li>
                    </ul>
                </div>
            </li>
            <li>
                <span>Config</span>
                <div class="toggle_hide">
                    <p>UPDATES</p>
                    <ul>
                        <li><p>22 FaceBook updates</p></li>
                        <li><p>22 FaceBook updates</p></li>
                    </ul>
                    
                </div>
            </li>
        </ul>
    </div>
    <div class="test">
        <ul>
            <li>
                <span>Config</span>
                <div class="toggle_hide">
                    <p>UPDATES</p>
                    <ul>
                        <li><p>22 FaceBook updates</p></li>
                        <li><p>22 FaceBook updates</p></li>
                    </ul>
                </div>
            </li>
            <li>
                <span>Config</span>
                <div class="toggle_hide">
                    <p>UPDATES</p>
                    <p>content text</p>
                </div>
            </li>
        </ul>
    </div>
</div>

CSS

.toggle_hide{
    display:none;
}

.test {
    float: left;
    width:150px;
    margin-right:20px;
}

ul{
    margin-top:30px;
}

JavaScript

$(document).ready(function() {
    $('.toggle_hide').hide();

    $("#background_absolute_content li span").css('cursor', 'pointer').click(function() {
        var $this = $(this);
        $('.toggle_hide').not($this.next("div")).fadeOut(200, function() {
            $this.next("div").fadeIn(200);
        });
    });
});