Fullpage.js while hiding and showing content doesn't auto resize height of that section

Question

So basically, I have a paragraph inside a div which has long text and is hidden on page load and there is a link read more which calls the function show that hidden paragraph but when the hidden paragraph is shown the section doesn't resizes it's height automatically.

I have created a code pen for the issue: https://codepen.io/Byakugan/pen/yjNJao?editors=0010

$(document).ready(function() {
  //Full page js product tab starts here
  var userdata = $("#usersec").clone();
  var businessdata = $("#businesssec").clone();
  $("#usersec").remove();
  // window.innerHeight = window.innerHeight - 85;
  $("#fullpage").fullpage({
    sectionsColor: ["#fff", "#FFF", "#FFF", "#fff"],
    scrollOverflow: true,
    navigation: true,
    navigationPosition: "right",
    responsiveWidth: 927,
    onLeave: function(index, nextIndex, direction) {
      var leavingSection = $(this);

      //after leaving section 2
      if (direction == "down") {
        $(".trume-header").fadeOut("fast");
        $(".tab-pane").removeClass("active1");
        $(".testimonials-container").addClass("active");
        $(".product-nav-tabs").addClass("product-nav-tabs1");
        $(".content").addClass("content1");
      } else if (direction == "up") {
        $(".trume-header").fadeIn("fast");
        $(".tab-pane").addClass("active1");
        $(".testimonials-container").removeClass("active");
        $(".product-nav-tabs").removeClass("product-nav-tabs1");
        $(".content").removeClass("content1");
      }
    }
  });

  $(document).on("click", ".userclck1,.userclck2", function() {
    $("#fullpage").fullpage.destroy("all");
    $("#fullpage").empty();
    userdata.appendTo("#fullpage");
    $(".userclck1,.userclck2")
      .prev()
      .removeClass("active");
    $(".userclck1,.userclck2").addClass("active");
    $("#fullpage").fullpage({
      sectionsColor: ["#fff", "#FFF", "#FFF", "#fff"],
      scrollOverflow: true,
      navigation: true,
      navigationPosition: "right",
      responsiveWidth: 927
    });
  });

  $(document).on("click", ".businesstab1,.businesstab2", function() {
    $("#fullpage").fullpage.destroy("all");
    $("#fullpage").empty();
    businessdata.appendTo("#fullpage");
    $(".businesstab1,.businesstab2")
      .next()
      .removeClass("active");
    $(".businesstab1,.businesstab2").addClass("active");
    $("#fullpage").fullpage({
      sectionsColor: ["#fff", "#FFF", "#FFF", "#fff"],
      scrollOverflow: true,
      navigation: true,
      navigationPosition: "right",
      responsiveWidth: 927
    });
  });
  //Full page js product tab ends here
});

Answer 1

Use $.fn.fullpage.reBuild() just after you show the text.

As detailed in the the fullpage.js documentation:

reBuild() Updates the DOM structure to fit the new window size or its contents. Ideal to use in combination with AJAX calls or external changes in the DOM structure of the site, specially when using scrollOverflow:true.