scrollOverflow with inner accordion or an element when clicked, a new element will slide down.

[lhorainemarinas]

First of great plugin you have here! I just have one concern with one of my project. http://sagami.tcapdm.com/ Please do click the 3rd menu to view the products.

I did used the option scrollOverflow: true, then I also linked the scrolloverflow.min.js My problem is that the height of the products section does not update it's height when I open one of the main category of the products because will be a slideDown effect for the sub category per main category of the product.

For reference here is my fullpage initialization code: `fp.fullpage({ navigation: true, navigationPosition: 'right', autoScrolling: true, verticalCentered: false, paddingTop: headerHeight, scrollOverflow: true, onLeave: function(index, nextIndex, direction) { $("#website .section .top-line, #website .section .bot-line").remove(); prevIndex = index; var d = $('#website .section:eq('+(nextIndex-1)+')').attr('id'), o = d.indexOf('-') < 0 ? d.lenth : d.indexOf('-'), id = d.substring(0, o); $('.tabs li[data-menuanchor^="'+id+'"]').addClass('active').siblings().removeClass('active'); fp.addClass('is_animating'); $('.sub-products').hide(); }, afterLoad: function(anchorLink, index) { adaptSize(); //for displaying dots for each carousel if ($body.is('[class=features]')) { $("#fp-nav ul li[id^='features']").css('display','block') } else if ($body.is('[class=about-us]')){ $("#fp-nav ul li").attr('style',''); $("#fp-nav ul li[id^='about-us']").css('display','block') } else { $("#fp-nav ul li").addClass("animated fadeIn").attr('style',''); }

        fp.removeClass('is_animating');
        fp.removeClass('ifade');
        // console.log(prevIndex);
        if (Math.abs(index - prevIndex) >= 2) {
            moveSlideTo(index);
        }

        //add animation on text
        var _section = $("#website .section"),
            _active_section = $("#website .section").hasClass("active");

        _section.find("h2, h1, .sub-text").removeClass("animated fadeInLeft");
        _section.find(".right-svg img").removeClass("animated fadeInRight");

        if (_active_section) {
            $(this).find("h2, h1, .sub-text").addClass("animated fadeInLeft");
            $(this).find(".right-svg img").addClass("animated fadeInRight");
        }

        // add lines for each carousel
        if ($(".section.active").hasClass("carousel")) {
            addLines();
        }

        //draw svg lines
        $('#website .right-svg svg').css('visibility', 'hidden');
        var svg = $("#website .section:eq("+(index-1)+") .right-svg").find("svg"),
             lhoraine = svg.attr('id');
        if (lhoraine) {
            var speed = svg.find("path")[0].getTotalLength() * 0.2,
            animateNow = new Vivus(lhoraine, {
                type: 'oneByOne',
                duration: speed,
                onReady: function (vivusInstance) {
                    vivusInstance.el.style.visibility = 'visible'
                }
            });
            animateNow.play();
        }
    }
});`

For the accordion style of the sub categories here is my code: `var subProd = $(".sub-products"), subProd_hide = subProd.css('display') == 'none', productCat = $('.product-list-wrap .product-wrap');

var temp="";
var flag=0;
productCat.click(function(){
    var dataId = $(this).data('slider_id'),
        t = $('.sub-products.' +dataId),
        _this = $(this);

    if(temp != dataId && flag==1){
        $('.sub-products.' +temp).stop(true,true).slideUp(function(){
            t.stop(true,true).slideToggle();
        });
    }
    else{
        t.stop(true,true).slideToggle();
    }

    temp = dataId;
    flag=1

    adaptSize();
    subProdAutoheight();
});`

[alvarotrigo]

First of great plugin you have here! I

Thanks! Glad it helps!

My problem is that the height of the products section does not update it's height when I open one of the main category of the products

You'll have to make use of the reBuild function. Just call it when the slider finishes opening.

$.fn.fullpage.reBuild();