JSFiddle - React, Tailwind, and code Playground

by MoGryph

HTML

<p>Tests for fieldset .slideUp() issues.</p>
<br />
<p><b>Test 1) </b> Watch Section 2 as a .slideUp() and .slideDown() is performed- the text inside the fieldset continues to be displayed during the full round-trip, and bleeds-through the text below it.</p>
<p><b>Test 2) </b> Click Section 3 legend. .slideUp() will be performed, there is no content below this fieldset, and much of the content remains displayed.
    <p><b>Test 3) </b> Click to a different browser tab (or minimize and restore) and the text will not be displayed.<br /><br />
        <fieldset id='fieldSet1'><legend>Section 1 - <b>Click me to slide-up</b></legend>
            Fieldset1 (click to slide up) Fieldset1 (click to slide up) Fieldset1 (click to slide up) Fieldset1 (click to slide up) Fieldset1 (click to slide up)
        </fieldset>
        
        <fieldset id='fieldSet2'><legend>Section 2 - auto slideUp / slideDown <b>Click to repeat</b></legend>
            Fieldset2 (auto slide up) Fieldset2 (auto slide up) Fieldset2 (auto slide up) Fieldset2 (auto slide up)<br />Fieldset2 (auto slide up) Fieldset2 (auto slide up)
        </fieldset>
        
        A few more lines<br />
        to show that the text continues to<br />
        bleed-through a fieldset after slideUp<br /><br />
        
        <fieldset id='fieldSet3'><legend>Section 3 - <b>Click me to slide-up</b></legend>
            Fieldset3 (click to slide up) Fieldset3 (click to slide up) Fieldset3 (click to slide up) Fieldset3 (click to slide up) Fieldset3 (click to slide up)
        </fieldset>

CSS

fieldset {
    color: red;
    border: 1px solid purple;
    padding: 5px;
    margin-bottom: 10px;
}

fieldset legend {
    color: green;
    border: 1px solid red;
    margin-left: 10px;
    padding-left: 10px;
    cursor: pointer;
}

JavaScript

$("#fieldSet2").slideUp();

$("#fieldSet1 legend, #fieldSet3 legend").click(function() {
    $(this).parent().slideUp();
});


$("#fieldSet2").slideDown();

$("#fieldSet2 legend").click(function(){
       $(this).parent().slideUp().slideDown();
});