JSFiddle - React, Tailwind, and code Playground

by lawrence pond

HTML

<div id="tab1" class="tabs">
    <a href="#" id="tab1link">Tab 1</a>
    
    <ul>
        <li>1</li>
        <li>2</li>
    </ul>
</div>

<div id="tab2" class="tabs">
    <a href="#" id="tab2link">Tab 2</a>
    
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li><a href="http://www.google.com/">4</a></li>
    </ul>
</div>

CSS

body {
    font-family: Arial;
    font-size: 13px;
    line-height: 16px;
    }

    .tabs a {
        background-color: #dedede;
        color: #565656;
        display: block;
        margin-bottom: 5px;
        padding: 5px 8px;
        text-decoration: none;
    }

    .tabs ul {
        margin: 0 0 10px;
        padding: 0;
    }

    .tabs li {
        background-color: #eee;
        border: 1px solid #ccc;
        color: #1a1a1a;
        display: none;
        border-radius: 5px;
        margin-bottom: 1px;
        padding: 5px 10px;
    }

JavaScript

$(function() {
    var timeouts = [],
        nTimeouts = 0;
    // A helper function that allows multiple LI elements to be either
    // faded in or out or slide toggled up and down
    function fadeOutItems(ele, delay) {
        var $$ = $(ele), $n = $$.next();
        // Toggle the active class
        $$.toggleClass('active');
        // Clear any timeout's still waiting
        while (nTimeouts--) {
            clearTimeout(timeouts[nTimeouts]);
        }
        // Ensure the next element exists and has the correct nodeType
        // of an unordered list aka "UL"
        if ($n.length && $n[0].nodeName === 'UL') {
            nTimeouts = $('li', $n).length;
            $('li', $n).each(function(i) {
                // Determine whether to use a fade effect or a very quick
                // sliding effect
                // cache this
                var _this = $(this);
                timeouts[i] = setTimeout(function() {
                    delay ? _this.fadeToggle('slow') : _this.slideToggle('fast');
                }, 400*i);
            });
        }
    }
    // Retrieves the URL parameters from the window object and allows
    // for custom query parameter requests by name
    function getParameterByName(name) {
        name = name.replace(/[\[]/, '\\\[').replace(/[\]]/, '\\\]');
        var regexS  = '[\\?&]' + name + '=([^&#]*)';
        var regex   = new RegExp(regexS);
        var results = regex.exec(window.location.href);
        if (results === null) {
            return false;
        } else {
            return decodeURIComponent(results[1].replace(/\+/g, ' '));
        }
    }
    // This is the jQuery event that controls the click event for the
    // tabs on the page by using a class to cut down on code
    $('a', '.tabs').click(function(e) {
        //e.preventDefault();
        $('.tabs ul li').hide();
        // Check on the other tabs, if the anchor link contains the
        // class "active" fade out the UL list items
        var...