Height with Dragend JS

Question

Height with Dragend JS

I am using Drangend JS ( https://github.com/Stereobit/dragend ), but I am having problems setting the height to automatic.

I have two divs in the slide, one 200px the other 500px. The page uses the height of the tallest div (500px), but I want the page height to change to the height of the div, which is now visible when clicked or clicked. If div is one visible, page height should be 200px, and if div 2 is visible, page height should be 500px

<body>
 <div id="demo">
   <ul>
    <li class="first dragend-page" ></li>
    <li class="last dragend-page"></li>
  </ul>
</div>


 <ul class="nav">
   <li data-page="1" >1</li>
   <li data-page="2">2</li>
</ul>
</body>

Below is my code

 <script>

$(function() {
  $("#demo").dragend({
    afterInitialize: function() {
      this.container.style.visibility = "visible";
    },
    onSwipeEnd: function() {
      var first = this.pages[0],
          last = this.pages[this.pages.length - 1];

      $(".prev, .next").removeClass("deactivated");
      $(".nav li").removeClass("active");

      $(".nav li").eq(this.page).addClass("active");

    }
  });


  $(".nav").click(function() {
    var page = $(event.target).data("page");

    $("#demo").dragend({
      scrollToPage: page
    });

    $(event.target).addClass("active");

  })

});
</script>