JSFiddle - React, Tailwind, and code Playground

by Jim_Toth

HTML

<header><h1>Site Name</h1></header>

<div id="content">
    <h1>WordPress Post Title</h1>
    
    <div id="stepByStep" class="notReadyToUse" style="display:none;">
        <h1>Step By Step Title</h1>
        <p>The .after() and .insertAfter() methods perform the same task. The major difference is in the syntax—specifically, in the placement of the content and target. With .after(), the selector expression preceding the method is the container after which the content is inserted. With .insertAfter(), on the other hand, the content precedes the method, either as a selector expression or as markup created on the fly, and it is inserted after the target container.</p>
        <ul>
            <li>Hello World 1</li>
            <li>Hello World 2</li>
            <li>Hello World 3</li>
        </ul>
    </div>
    <p>
        All of the methods in this section manipulate the DOM in some manner. A few of them simply change one of the attributes of an element (also listed in the Attributes category).
    </p>
</div>

JavaScript

/*
$('#stepByStep').clone().insertBefore('#content').removeClass('notReadyToUse').slideDown();
$('#stepByStep.notReadyToUse').remove();
*/