multiple instances of fullpage.js

Question

I am trying to use fullpage.js for two different sections on one website. Basically, when a slide is clicked on, it reveals a child wrapper div underneath with its own sections to vertically scroll through before the main section continues on.

Here is my code that I am working with. I'm trying to load it in through ajax but I'm wondering if there is an easier way I am overlooking.

$("#wrapper").fullpage({
    verticalCentered: true,
    resize : true,
    anchors: ['section1', 'section2', 'section3', 'about'],
    //menu:'#menu',
    customScroll:true,
    onLeave: function(index, nextIndex, direction){
        //console.log(index+'|'+nextIndex+'|'+direction);

        if (direction == 'down'){
            $('.section:nth-child('+index+')').animate({'top':'0%'},0)
            $('.section:nth-child('+nextIndex+')').animate({'top':'100%'},0).animate({'top':'0%'},500);
        } else {
            $('.section:nth-child('+nextIndex+')').animate({'top':'0%'},0);
            $('.section:nth-child('+index+')').animate({'top':'0%'},0).animate({'top':'100%'},500).animate({'top':'500%'},0);
        }
    }
});

and then the code that removes it and adds a new wrapper:

$(".sub_section").click(function() {
    $("#wrapper").fullpage.destroy('all');
    if (sub_section_open == false) {
        $("#left_border").animate({"borderLeftWidth" : "0px"}, 300);
        $("#right_border").animate({"borderRightWidth" : "0px"}, 300);
        $("#top_border").animate({"borderTopWidth" : "0px"}, 300, function() {
            $("#left_border").hide();
            $("#right_border").hide();
            $("#top_border").hide();    
        }); 

        $(".sub_section .letters").slideUp("slow", function(){
            $(".sub_section .content").css({'z-index': 1}); 
        });
        sub_section_open = true;
        $(".btn_sub_section_close").show();
        $( "#wrapper" ).load( "section1.html" );
        $("#section1").fullpage({
            verticalCentered: true,
            resize : true,
            anchors: ['ssection1', 'ssection2', 'ssection3', 'ssection4'],
            menu:'#menu'
        });
    }
});

Any ideas? Thanks!

Answer 1

fullpage.js only supports one instance.

It is a fullpage plugin and it is not made to support them as it doesn't make sense. It is full page, all the page will be part of one instance of fullpage.

You can easily see evidences of it in the code, for example in this line:

$('.fp-section').each(function(index){

Any section on the page, no matter which container/wrapper it uses, will be treated inside one single instance of fullpage.