JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li><button class="toggler">+/-</button> A
        <ul style="display:block;">
            <li><button class="toggler">+/-</button> A1
                <ul style="display:display;">
                    <li>A1-1</li>
                    <li>A1-2</li>
                </ul>
            </li>
            <li><button class="toggler">+/-</button> A2</li>
        </ul>        
    </li>
    <li><button class="toggler">+/-</button> B</li>
</ul>
<hr />
<button class="all">+/- all</button>
<hr />
When clicking the "all" button, we want any list (nested or not) to collapse.
<br />
But when done, if we click "A" to expand it anew, we see that its nested "A1" list remained expanded.

CSS

li {
    margin-left: 2em;
}
.toggler {
    margin-left: -2em;
}

JavaScript

$(document).ready(function() {
    $('.toggler').click(toggle_one);
    $('.all').click(toggle_all);
});
function toggle_one() {
    $(this).next().toggle();
}
function toggle_all() {
    $('.toggler').click();
}