JSFiddle - React, Tailwind, and code Playground

by Ardemus

HTML

<h1>Original Display</h1>
<div class="main">
    <h2>Display</h2>
    <div class="innerDiv" style="display:none;">
        <p>Thing to hide and show.</p>
    </div>
</div>
<p style="clear:both">The functions should show/hide an inner div element in the Display element and an in memory clone of that element.  The functions then append clones of the resulting elements for inspection.</p>

CSS

/* CSS is not relevant to this issue */
div, form, p, h1, h2 { margin: 3px 5px; padding: 5px 5px; }
h2 { color: white }
.main { background-color: blue; width: 370px; float: left;}
hr { width: 100%; clear: both; }
.innerDiv { background-color: white; }

JavaScript

// Set Up
var $Display = $('.main');
var $Buffer;

// Helper Function
this.displayResults = function(Header) {
    $('body').append($('<br /><hr /><h1>' + 
      Header + '</h1><p>The resulting Display (left) and the resulting Buffer (right)</p>'),
      $Display.clone(true, true), $Buffer);
};

// .toggle() innerDiv while outside of the DOM - does not work
this.demonstrateBug = function() {
    $Buffer = $Display.clone(true,true);
    $Display.add($Buffer).find('.innerDiv').toggle();  // Call toggle on an in memory jQuery object
    displayResults('Demonstrate Bug');
};

// .toggle() innerDiv while in the DOM - works
this.demonstrateExpectedBehavior = function() {    
    $Buffer = $Display.clone(true,true);
    $Display.after($Buffer); // Put the buffer in the DOM first...
    $Display.add($Buffer).find('.innerDiv').toggle();
    displayResults('Demonstrate Expected Behavior');
};

// Manually toggle innerDiv css while outside of the DOM - works
this.demonstrateManualToggle = function() {       
    $Buffer = $Display.clone(true,true);
    if($Display.children('div.innerDiv').css('display') === 'none') {
        $Buffer.find('.innerDiv').css("display", 'block');
    } else {
        $Buffer.find('.innerDiv').css("display", 'none');
    }
    $Display.find('.innerDiv').toggle();    
    displayResults('Demonstrate Manual Toggle From Hidden');
};


// Demonstration
demonstrateBug(); // Correctly Shows innerDiv
demonstrateBug(); // Does not hide inner Div
demonstrateExpectedBehavior (); //Shows
demonstrateExpectedBehavior (); //Hides
demonstrateManualToggle(); //Shows
demonstrateManualToggle(); //Hides