JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<div class="primary">primary</div>
<div class="secondary">secondary</div>

CSS

.parent { border: 3px solid red; }
.iwrap { border: 3px solid green; }
.owrap { border: 3px solid blue; }
.toggle { width: 10px; height: 10px; background: black; }

JavaScript

var fade = false,
    toggle = true;
    togglePos = 'top'

var primsec = $('.primary').next().andSelf();

primsec.wrapAll('<div class="parent" />');

// If fade is false.
if ( !fade ) {
    primsec.wrapAll('<div class="iwrap" />');
    
    // If toggle is set, wrap new element around iwrap.
    toggle && $('.iwrap').wrap('<div class="owrap" />');
}

// If togglepos is 'top', use prependTo, else use appendTo.
var tp = togglePos === 'top' ? 'prependTo' : 'appendTo';
toggle && $('<div class="toggle" />')[ tp ]('.parent');