JSFiddle - React, Tailwind, and code Playground

HTML

<h1>jQuery toggle() function don't affect elements hidden by thier parent object:</h1>

<p>in this example A & B should toggle together, but when you click 'toggle span' button once, then 'toggle div' once and again 'toggle span' you will see, that B object is still visible.</p>

<button id='spanBut'>Toggle SPAN</button> 
<button id='divBut'>Toggle DIV</button>

<br/>

<span>A</span>
<div style="display: none; background:#ccc">
    <span>B</span>
</div>

CSS

h1 { font-weight:bold;}
p { margin:10px;}

JavaScript

$("#spanBut").click(function () {
$("span").toggle();
});
$("#divBut").click(function () {
$("div").toggle();
});