JSFiddle - React, Tailwind, and code Playground

by StepBaro

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.js"></script>
<div id="menu">
    <a href="#page1">page1</a>
    <a href="#page4">page4</a>
    <a href="#page5">page5</a>
</div>
<div id="fullpage">
    <div style="background-color:#ff7f7f;" class="section" data-anchor="page1">
        <h1>1</h1>
        <a href="#page2">page2</a>
        <a href="#page3">page3</a>
        <a href="#page6">page6</a>
    </div>
    <div style="background-color:#ff7fdf;" class="section" data-anchor="page2">
        <h1>2</h1>
    </div>
    <div style="background-color:#a67fff;" class="section" data-anchor="page3">
        <h1>3</h1>
    </div>
    <div style="background-color:#7fafff;" class="section" data-anchor="page4">
        <h1>4</h1>
    </div>
    <div style="background-color:#7fcdff;" class="section" data-anchor="page5">
        <h1>5</h1>
    </div>
    <div style="background-color:#c1ff7f;" class="section" data-anchor="page6">
        <h1>6</h1>
    </div>
</div>

CSS

html,
body {
    background-color: #e0e0e0;
    font-family: verdana;
    font-size: 20px;
    text-align: center;
}

#menu {
    position: fixed;
    top: 20px;
    width: 100%;
    z-index: 9999;
}

#menu a {
    margin: 0px 20px;
    font-weight: bold;
    color: #777;
    text-decoration: none;
}

#menu a:hover {
    color: #bed663;
}

#menu a.selected {
    color: #bed663 !important;
}

JavaScript

$(document).ready(function() {
    $('#fullpage').fullpage({
        anchors: ['page1', 'page2', 'page3', 'page4', 'page5', 'page6'],
        css3: false,
        afterRender: function() {
            $.fn.fullpage.initSkipEl();
        },
        afterLoad: function(anchorLink, index) {

            var realIndex = $.fn.fullpage.getRealIndex(index);

            $('#menu a').removeClass('selected');
            $('#menu a[href="#' + anchorLink + '"]').addClass('selected');
            /*if (realIndex == 1) {
                $.fn.fullpage.skipEl([], -1, -1); //ALL PAGE VISIBILE.
            }*/
        },
        onLeave: function(index, nextIndex, direction) {

        }
    });

    $.fn.fullpage.funcSkipEl = function(index, nextIndex) {
        //console.log('index: ' + index + ' / nextIndex: ' + nextIndex);

        if (index == 1) {
            $.fn.fullpage.skipEl(['page2', 'page3'], index, nextIndex);
        }

    }


});




$.fn.fullpage.skipEl = function(anchorsToSkip, index, nextIndex) {

    $('.section').each(function() {
        if (anchorsToSkip.indexOf($(this).attr('data-anchor')) > -1 && $(this).attr('data-anchor') != $('.section').eq(index - 1).attr('data-anchor') && $(this).attr('data-anchor') != $('.section').eq(nextIndex - 1).attr('data-anchor')) {
            $(this).css('display', 'none').removeClass('fp-section');
        } else {
            $(this).css('display', '').addClass('fp-section');
        }
        $.fn.fullpage.reBuild();
    });

}

$.fn.fullpage.initSkipEl = function() {
    $(document).ready(function() {

        if ($.isFunction($.fn.fullpage.funcSkipEl)) {
            var nextIndex = 0;
            $('.section').each(function() {
                nextIndex++;
                $('a[href="#' + $(this).attr('data-anchor') + '"]').on('click', function() {
                    var dataAnchor = $(this).attr('href').toString().replace('#', '');
                    return...