JSFiddle - React, Tailwind, and code Playground

by Corey Frang

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/dot-luv/jquery-ui.css">
<div id="tabs">
    <h2>Details</h2>
    details text...
    <h2>tech specs</h2>
    tech spec text...
    <h2>Video Sample</h2>
    video embed url
</div>

CSS

.jackie { margin: 0.5em; padding: 0.5em; background-color: #abcdef; }

JavaScript

$("#tabs h2").each(function(index) {

    var $div = $('<div id="tabs-' + (index + 1) + '" class="jackie">');
    $div.insertBefore(this);
    // jQuery skips text nodes, so lets grab all the nodes until we find another h2
    // using DOM
    var nodes = [this];
    var node = this.nextSibling;
    while (node && (!node.tagName || node.tagName.toUpperCase() != 'H2')) {
        nodes.push(node);
        node = node.nextSibling;
    }
    $div.append(nodes);

});