Adding or removing sections/slides to fullPage.js after initialization

I have a tree-structured database and in my website I am going down the tree as I show their content in "sections" and "slides" of fullPage.js plugin. The problem is, when I append a new section to a fullpage element, it can not be a part of the plugin.

The reason I trace the tree in that way is, the the distances of the 'leafs' from the root might not meet the same.

Tl;dr, I want to do this: https://github.com/alvarotrigo/fullPage.js/issues/41

I needed to do something similar but with a little more flexibility. And it was important to enable sections above, without moving the contents of the current page.

I just started using FullPage.js so I did not try any problems with other plugin features. But I share the result here.

It's a little complicated, but it does what I need! Examples at the end...

I had to modify 2 lines of FullPage.js plugin:

function moveSectionUp(){
        var prev = $(SECTION_ACTIVE_SEL).prevAll(SECTION_SEL + ':first');  // <--- THIS
        // var prev = $(SECTION_ACTIVE_SEL).prev(SECTION_SEL); // <--- INSTEAD OF THIS

And

function moveSectionDown(){
        var next = $(SECTION_ACTIVE_SEL).nextAll(SECTION_SEL + ':first');  // <--- THIS
        //var next = $(SECTION_ACTIVE_SEL).next(SECTION_SEL);  // <--- INSTEAD OF THIS

And these are the functions added:

fpInitSkipEl = function(funcSkipEl) {

    if ($.isFunction(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 funcSkipEl($('.section').index($('.section.active')) + 1, $('.section').index($('.section[data-anchor="' + dataAnchor + '"]')) + 1);
            });
        });
    }

}

fpSkipEl = function(anchorsToSkip, index, nextIndex) {
    //debugger;
    $('.section').each(function() {
        if (anchorsToSkip.indexOf($(this).attr('data-anchor')) > -1
            && (index==-1 || $(this).attr('data-anchor') != $('.section').eq(index - 1).attr('data-anchor'))
            && (nextIndex==-1 || $(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();
    });

}


fpGetRealIndex = function(index) {
    var realIndex = 0;
    $('.section').each(function() {
        realIndex++;
        if ($(this).hasClass('fp-section')) index--;
        if (index == 0) return false;
    });
    return realIndex;
}

The main use is this:

fpInitSkipEl(function(index, nextIndex) { 
    // Fire on anchor Click
    // You can play with index (the current section) and nextIndex (the next section)

    if (index==1 && nextIndex==4) {
        fpSkipEl(['page2', 'page3'], index, nextIndex);

    }
});

And init and set your logic on afterLoad

$('#fullpage').fullpage({
    anchors: ['page1', 'page2', 'page3', 'page4'],
    afterLoad: function(anchorLink, index) {
            // Get the real index with the hidden sections, oterwise index is relative to the visible sections.
            var realIndex = fpGetRealIndex(index);

            fpSkipEl([], -1, -1); // Show all sections
        }
    });

The simple working example on JSFiddle

A more complex example on JSFiddle