BX-Slider to adjust adaptive height with Read More button

Question

I'm using bx-slider. I was tasked at adding a "Read More" button for one of the slides, which should expand the slide height. The problem is that the BX-slider won't recalculate the height when I run the readmore.js function. Is there a way to call the adaptive height function at the same time that I click the "Read More" function from a different plugin?

Thank you

$(document).ready(function() {
  $('.bxslider').bxSlider({

    adaptiveHeight: true,
    pagerCustom: '#bx-pager'

  });
});


$('.readmore').readmore();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.min.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.min.js"></script>

<script src="https://fastcdn.org/Readmore.js/2.1.0/readmore.min.js"></script>



<ul class="bxslider">

  <li>
    <div class="readmore">
      
    <h3>Slide with "Read More" Button. </h3>  
      <p>First click on the "Read More" button. I'd like the adaptive height to kick in at this point. If you click either arrow arrow, and return back to this slide, the height is adjusted. But then if you click the close button, the height also does not adjust.</p>

      <p>Etiam in odio eget erat molestie aliquet. Proin rutrum nunc ut eros consectetur, id pretium mauris euismod. Aliquam facilisis, neque ac pharetra iaculis, risus purus maximus augue, nec efficitur libero lacus id mauris. Duis sagittis massa nec lorem vestibulum, ac tempus enim eleifend. Pellentesque condimentum facilisis ante id efficitur. Nullam in congue metus, vel consectetur nibh. Curabitur ut suscipit eros. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
        mus. Aenean vel odio feugiat, feugiat quam non, tincidunt mauris. Etiam non efficitur justo, interdum suscipit libero. Etiam in odio eget erat molestie aliquet. Proin rutrum nunc ut eros consectetur, id pretium mauris euismod. Aliquam facilisis, neque ac pharetra iaculis, risus purus maximus augue, nec efficitur libero lacus id mauris. Duis sagittis massa nec lorem vestibulum, ac tempus enim eleifend. Pellentesque condimentum facilisis ante id efficitur. Nullam in congue metus, vel consectetur nibh. Curabitur ut suscipit eros. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
        mus. Aenean vel odio feugiat, feugiat quam non, tincidunt mauris. Etiam non efficitur justo, interdum suscipit libero.</p>
    </div>

  </li>

  <li>
<h3>Other Slide</h3>
    <p>
      Praesent vulputate metus volutpat nibh ornare, vitae suscipit lacus vehicula. Aenean accumsan ornare placerat. Curabitur ullamcorper vehicula nisi quis pellentesque. Mauris viverra massa non mattis convallis. Nunc accumsan libero sagittis quam consectetur
      pulvinar. Quisque euismod lacinia magna id sagittis. Aenean tempor est placerat hendrerit pellentesque. Praesent id vehicula odio, eget condimentum dolor. In vehicula lacinia efficitur. Vivamus nec iaculis ante, sit amet facilisis dui. Nunc imperdiet,
      dolor nec posuere vulputate, metus mi lobortis ligula, nec posuere diam nunc eu dolor. Donec non rhoncus justo. Vestibulum sagittis quis leo quis hendrerit. Phasellus quis arcu quis ligula luctus dapibus. Suspendisse gravida elementum arcu ut luctus.
    </p>
  </li>
</ul>

Answer 1

Use

bxSlider API - onSliderResize callback

---

Readmore API - afterToggle callback

bxSlider can get non-responsive to events that indirectly resizes it's dimensions. You can "wake" it up by directly resizing .bx-viewport.

  function bxAdjust(idx) {
     $('.bx-viewport').height("0").height('100%');
  }

Use that simple function as the callback for both onSliderResize and afterToggle. Working Snippet below.

SNIPPET

$(document).ready(function() {
  var bx = $('.bxslider').bxSlider({
    adaptiveHeight: true,
    pagerCustom: '#bx-pager',
    onSliderResize: bxAdjust
  });
});

function bxAdjust(idx) {
  $('.bx-viewport').height("0").height('100%');
}
$('.readmore').readmore({
  afterToggle: rmAdjust
});

function rmAdjust(tgr, ele, exp) {
  bxAdjust();
  if (exp) {
    tgr = 'Close';
  } else {
    tgr = 'Read More';
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.min.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.min.js"></script>

<script src="https://fastcdn.org/Readmore.js/2.1.0/readmore.min.js"></script>



<ul class="bxslider">

  <li>
    <div class="readmore">
      <h3>Slide with "Read More" Button. </h3> 
      <p>First click on the "Read More" button. I'd like the adaptive height to kick in at this point. If you click either arrow arrow, and return back to this slide, the height is adjusted. But then if you click the close button, the height also does not
        adjust.
      </p>

      <p>Etiam in odio eget erat molestie aliquet. Proin rutrum nunc ut eros consectetur, id pretium mauris euismod. Aliquam facilisis, neque ac pharetra iaculis, risus purus maximus augue, nec efficitur libero lacus id mauris. Duis sagittis massa nec lorem
        vestibulum, ac tempus enim eleifend. Pellentesque condimentum facilisis ante id efficitur. Nullam in congue metus, vel consectetur nibh. Curabitur ut suscipit eros. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
        mus. Aenean vel odio feugiat, feugiat quam non, tincidunt mauris. Etiam non efficitur justo, interdum suscipit libero. Etiam in odio eget erat molestie aliquet. Proin rutrum nunc ut eros consectetur, id pretium mauris euismod. Aliquam facilisis,
        neque ac pharetra iaculis, risus purus maximus augue, nec efficitur libero lacus id mauris. Duis sagittis massa nec lorem vestibulum, ac tempus enim eleifend. Pellentesque condimentum facilisis ante id efficitur. Nullam in congue metus, vel consectetur
        nibh. Curabitur ut suscipit eros. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean vel odio feugiat, feugiat quam non, tincidunt mauris. Etiam non efficitur justo, interdum suscipit libero.</p>
    </div>

  </li>

  <li>
    <h3>Other Slide</h3>
    <p>
      Praesent vulputate metus volutpat nibh ornare, vitae suscipit lacus vehicula. Aenean accumsan ornare placerat. Curabitur ullamcorper vehicula nisi quis pellentesque. Mauris viverra massa non mattis convallis. Nunc accumsan libero sagittis quam consectetur
      pulvinar. Quisque euismod lacinia magna id sagittis. Aenean tempor est placerat hendrerit pellentesque. Praesent id vehicula odio, eget condimentum dolor. In vehicula lacinia efficitur. Vivamus nec iaculis ante, sit amet facilisis dui. Nunc imperdiet,
      dolor nec posuere vulputate, metus mi lobortis ligula, nec posuere diam nunc eu dolor. Donec non rhoncus justo. Vestibulum sagittis quis leo quis hendrerit. Phasellus quis arcu quis ligula luctus dapibus. Suspendisse gravida elementum arcu ut luctus.
    </p>
  </li>
</ul>