JSFiddle - React, Tailwind, and code Playground

by nickadeemus2002

HTML

<script src="http://jachamboneth.cpsc3430.ausrc.org/au_greglist/scripts/slidetabs/jquery.mousewheel.min.js"></script>
<script src="http://jachamboneth.cpsc3430.ausrc.org/au_greglist/scripts/slidetabs/jquery.slidingtabs.js"></script>
<script src="http://jachamboneth.cpsc3430.ausrc.org/au_greglist/scripts/slidetabs/jquery.easing.1.3.js"></script>
<script src="http://jachamboneth.cpsc3430.ausrc.org/au_greglist/scripts/slidetabs/jquery.cookie.min.js"></script>
<h1>Horizontal demo</h1>                     
            
    <!-- Start HTML - Horizontal tabs -->
    <div id="st_horizontal" class="st_horizontal">                                                
        
        <div class="st_tabs_container">                                                                                                                                          
            
            <a href="#prev" class="st_prev"></a>
            
            <div class="st_slide_container">
            
                <ul class="st_tabs">
                    <li><a href="#st_content_1" rel="tab_1" class="st_tab st_first_tab st_tab_active">Horizontal Tab #1</a></li>
                    <li><a href="#st_content_2" rel="tab_2" class="st_tab">Horizontal Tab #2</a></li>                                     
                    <li><a href="#st_content_3" rel="tab_3" class="st_tab">Horizontal Tab #3</a></li>
                    <li><a href="#st_content_4" rel="tab_4" class="st_tab">Horizontal Tab #4</a></li>
                    <li><a href="#st_content_5" rel="tab_5" class="st_tab">Horizontal Tab #5</a></li>                                                       
                    <li><a href="#st_content_6" rel="tab_6" class="st_tab">Horizontal Tab #6</a></li>
                    <li><a href="#st_content_7" rel="tab_7" class="st_tab">Horizontal Tab #7</a></li>
                    <li><a href="#st_content_8" rel="tab_8" class="st_tab">Horizontal Tab #8</a></li>                                             ...

CSS

/* 
 * Sliding Tabs - jQuery Plugin
 * Copyright 2011, Christian André
 *
 * CHANGING THE WIDTH: To change the width of the tabs layout see line 14.
 *
------------------------------------------------------------------------------------- */
html { overflow:auto; }
        body { font:13px/18px Arial, Helvetica, sans-serif; background-color:#f5f5f5; width:775px; margin:20px auto; }
        body h1 { font-size:18px; margin:0 0 20px; }

div.st_horizontal { /* The main container */    
    position:relative;
    float:left;
    clear:both;
    width:775px; /* Set the full width */    
    color:#616161;
}

/* Control buttons
------------------------------------------------------------------------------------- */
div.st_horizontal a.st_prev, 
div.st_horizontal a.st_next { /* Directional buttons (previous/next) */
    position:absolute;
    top:0px;
    z-index:110;
    display:none;
    height:38px;
    width:39px;
    border:1px solid #d4d4d4;
    outline:none;
    background:#fff url(../img/btn_arrows.gif) no-repeat;    
}

div.st_horizontal a.st_prev { /* Previous button */
    left:0px;
    background-position:13px 13px;
    border-top-left-radius:4px;
    -moz-border-radius-topleft:4px;
    -webkit-border-top-left-radius:4px;
}

div.st_horizontal a.st_prev:hover { /* Previous button hover */    
    background-position:-50px 13px;
    background-color:#f5f5f5;
}

div.st_horizontal a.st_next { /* Next button */
    right:0px;
    background-position:14px -14px;
    border-top-right-radius:4px;
    -moz-border-radius-topright:4px;
    -webkit-border-top-right-radius:4px;
}

div.st_horizontal a.st_next:hover { /* Next button hover */    
    background-position:-49px -14px;
    background-color:#f5f5f5;
}

div.st_horizontal a.st_prev.st_btn_disabled, 
div.st_horizontal a.st_next.st_btn_disabled { /* Previous and next buttons disabled state */
    cursor:default;
    background-color:#f7f7f7;
}

div.st_horizontal a.st_prev.st_btn_disabled { /* Previous button...

JavaScript

$(document).ready(function() {

    // Horizontal Sliding Tabs demo
    $('div#st_horizontal').slideTabs({
        // Options              
        contentAnim: 'slideH',
        contentAnimTime: 600,
        contentEasing: 'easeInOutExpo',
        tabsAnimTime: 300
    });

    //var $tabs = $('#st_horizontal').tabs();
    var $tabs = $('#st_slide_container').tabs();
    
    console.log($tabs);
    
    $(".st_tab_view").each(function(i) {
        var totalSize = $(".st_tab_view").size() - 1;

        if (i != totalSize) {
            next = i + 2;
            $(this).append("<a href='#' class='next-tab mover' rel='" + next + "'>Next Page &#187;</a>");
        }

        if (i != 0) {
            prev = i;
            $(this).append("<a href='#' class='prev-tab mover' rel='" + prev + "'>&#171; Prev Page</a>");
        }

    });

    $('.next-tab, .prev-tab').click(function() {
        alert($(this).attr("rel"));
        //$tabs.tabs('select', $(this).attr("rel"));
        $tabs.tabs('select', 3);
        return false;
    });


});