JSFiddle - React, Tailwind, and code Playground

by navi2000

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css">
<div class="tabs">
    <div class="tab">
        <h3>Headline 1.</h3>
        <p>Ad debitis admodum commune est, audiam impedit apeirian ne pri. Quo oblique mediocritatem ad. Per veritus dolores id. Vix etiam iuvaret alienum no. Vis voluptua epicurei cu, autem mazim explicari id pri, has exerci possim officiis ei.</p>
    </div>
    <div class="tab">
        <h3>Headline 2.</h3>
        <p>Ius cu noster instructior, an iuvaret philosophia nam, vim no dissentias reprehendunt. Ex ius amet soleat argumentum. Docendi accusam no vim, sea aeterno oblique deterruisset ei. Ex quo nonummy fuisset, ubique dissentiet vituperatoribus vix te. Facete iisque discere est ei, mea modo integre platonem cu, quidam scripta te sit. Tota tamquam honestatis vim ne, sit iusto affert intellegebat ut, in est offendit suscipit inimicus.</p>
    </div>
    <div class="tab">
        <h3>Headline 3</h3>
        <p>Labore expetendis intellegam eu pri. Ei mel dico veri equidem, tempor corrumpit evertitur ut sea, duo iudico soleat mucius an. No pri detracto expetenda, movet maluisset at nec. Cibo assentior mea an, molestiae aliquando ut per. Semper facilis electram per id, vim eu harum pericula, no has diam possim. Tollit melius est ne, vis an elit vituperata.</p>
    </div>
</div>

CSS

body {
    font-size: 11pt;
}

div.tab {
    border-bottom: 2px solid #aaa;
    padding: 8px 3px;
}

.tab h3 {
    font-size: 1.5em;
}

.tab p {
    font-size: 1.0em;
}

JavaScript

// // The lab will be a real-world style exercise in which we tackle a problem seen in everyday web development. 

// The included HTML above is some basic information presented as a header with underlying content. The HTML above presents a clean viewing experience for a user who might have JavaScript disabled. However, if JavaScript is enabled, we want to use the jQuery UI tab widget and create a tab layout.

// In order to achieve this task, we will need to manipulate the HTML structure into one that the tab widget expects. We can use the DOM manipulation capabilities of jQuery to modify the structure.

// From the jQuery UI documentation ( http://jqueryui.com/demos/tabs/ ) we find that the tab structure needs to be:
//<div id="tabs">
//    <ul>
//        <li><a href="#tabs-1">Nunc tincidunt</a></li>
//        <li><a href="#tabs-2">Proin dolor</a></li>
//    </ul>
//    <div id="tabs-1">
//        <p>...</p>
//    </div>
//    <div id="tabs-2">
//        <p>...</p>
//    </div>
//</div>

// The task: Imagine that what is in the HTML pane is what is received on the client machine from the server. Using JavaScript and jQuery, modify the above structure so that it fits the jQuery UI expected structure for tabs.

// START ANSWER HERE

var $tabsList = $( "<ul></ul>" );

$( ".tab h3" )
    .each( function( idx ) {
        var $this = $( this ),
            tabId = "tabs-" + idx;
        
        $tabsList.append( "<li><a href='#" + tabId + "'>" + $this.text() + "</a></li>" );
        
        $this
            .parent()
                .removeClass( "tab" )
                .attr( "id", tabId );
        
        $this.remove();
        
    } );

$tabsList.prependTo( ".tabs" );

// END ANSWER

// When you have completed the tranformation, you can use the .tabs() method on the tabs div. You can do this by uncommenting the line below.
$( ".tabs" ).tabs();