JSFiddle - React, Tailwind, and code Playground

by s4ty

HTML

<div id="example-one" class="tab_box">
    <ul class="tab_navigation">
        <li class="tab_link first">    <a class=""        href="#Content_1">Content #1</a></li>
        <li class="tab_link">        <a class=""    href="#Content_2">Content #2</a></li>
        <li class="tab_link">        <a class=""        href="#Content_3">Content #3</a></li>
        <li class="tab_link last">    <a class=""        href="#Content_4">Content #4</a></li>
    </ul>

    <div class="tab_content_box">
        <div id="Content_1" class="tab_content">
            1
            <!-- Inhalt (Tab Content 1) -->
        </div>

        <div id="Content_2" class="tab_content">
            2
            <!-- Inhalt (Tab Content 2) -->
        </div>

        <div id="Content_3" class="tab_content">
            3
            <!-- Inhalt (Tab Content 3) -->
        </div>

        <div id="Content_4" class="tab_content">
            4
            <!-- Inhalt (Tab Content 4) -->
        </div>
    </div>
</div>

JavaScript

(function($) { 
    $.tabs = function(el, options) { 
        var oTab = this; 
        oTab.$el = $(el); 
        oTab.$nav = oTab.$el.find(".tab_navigation"); 

        oTab.init = function() {
            
            oTab.options = $.extend({},$.tabs.defaultOptions, options)
            oTab.options.startTab -= 1; 
            
            oTab.$nav
                .find('li a')
                .eq(oTab.options.startTab)
                .addClass('active');
            
            $('.tab_content').hide();
            
            // Liefert den ausgewählten Tab anhand der CSS Klasse 
            var curList = oTab.$el.find("a.active").attr("href").substring(1), 

            // Set outer wrapper height to (static) height of current inner list 
            // Stellen Sie Außenumhüllung Höhe zu (statisch) Höhe des aktuellen inneren Liste 
            $allListWrap = oTab.$el.find(".tab_content_box"), 
            curListHeight = $allListWrap.height(); 
            $allListWrap.height(curListHeight); 

            // Fade in new list on callback 

            // Adjust outer wrapper to fit new list snuggly 
            var newHeight = oTab.$el.find("#" + curList).height(); 
            $allListWrap.animate({ 
                height: newHeight 
            }); 

            oTab.$el.find("#" + curList).fadeIn(oTab.options.speed); 
            console.log(oTab.$el.find("#" + curList)) 

             
            oTab.$nav.delegate("li > a", "click", function() { 
                // Liefert den ausgewählten Tab anhand der CSS Klasse 
                var curList = oTab.$el.find("a.active").attr("href").substring(1), 

                // List moving to 
                $newList = $(this), 

                // Liefert dei ID (Link) des ausgewählten Tab zurück 
                listID = $newList.attr("href").substring(1), 

                // Set outer wrapper height to (static) height of current inner list 
                // Stellen Sie Außenumhüllung Höhe zu...