redrawSlider is not a function

I have a bxSlider inside a Div element that starts hidden when the page loads (display set to none). When i press a button to toggle the content, the slider stays with height: 0px.

I tried to use the redrawSlider method on their documentation but i get the error that “redrawSlider is not a function”

My code below, HTML and jQuery:

<aside id="thumbnailSlideShowContainer" class="col-xs-12 noPadding">         <div class="bx-wrapper" style="max-width: 100%;"><div class="bx-viewport" style="width: 100%; overflow: hidden; position: relative; height: 0px;"><ul class="col-xs-12 noPadding" style="width: 1115%; position: relative; transition-duration: 0s; transform: translate3d(0px, 0px, 0px);"><li style="float: left; list-style: none; position: relative; width: 100px;" class="bx-clone">                     <a class="slideshowFancybox"  href="https://youtu.be/wLDuxlirxKY" target=""> <i class="fa fa-play-circle slideshowVideoIcon"></i>                             <div class="col-sm-4 hidden-xs slideText hidden">                          </div>                         <img width="1270" class="img-responsive " src="v-636758984126549480/format/jpg/width/1270/Files/Images/Hewitt/Slideshows/Roll-A-Dock_slide-8.jpg" alt="Roll-A-Dock fishing" title="Roll-A-Dock fishing">                     </a>                 </li>                 <li style="float: left; list-style: none; position: relative; width: 100px;">                     <a href="javascript:void(0)" target="">                         <div class="col-sm-4 hidden-xs slideText hidden">                                 <h2>Launching Roll-A-Dock</h2>                          </div>                         <img width="1270" class="img-responsive " src="v-636759009248943866/format/jpg/width/1270/Files/Images/Hewitt/Slideshows/Roll-A-Dock_slide-0.jpg" alt="Launching Roll-A-Dock" title="Launching Roll-A-Dock">                     </a>                 </li>                 <li style="float: left; list-style: none; position: relative; width: 100px;">                     <a href="javascript:void(0)" target="">                         <div class="col-sm-4 hidden-xs slideText hidden">                                 <h2>Roll-A-Dock with Cantilever Lifts</h2>                          </div>                         <img width="1270" class="img-responsive " src="v-636758978574998469/format/jpg/width/1270/Files/Images/Hewitt/Slideshows/Roll-A-Dock_slide-1.jpg" alt="Roll-A-Dock with Cantilever Lifts" title="Roll-A-Dock with Cantilever Lifts">                     </a>                 </li>                 <li style="float: left; list-style: none; position: relative; width: 100px;">                     <a href="javascript:void(0)" target="">                         <div class="col-sm-4 hidden-xs slideText hidden">                                 <h2>T shaped Roll-A-Dock</h2>                          </div>                         <img width="1270" class="img-responsive " src="v-636758978575008469/format/jpg/width/1270/Files/Images/Hewitt/Slideshows/Roll-A-Dock_slide-2.jpg" alt="T shaped Roll-A-Dock" title="T shaped Roll-A-Dock">                     </a>                 </li>                 <li style="float: left; list-style: none; position: relative; width: 100px;">                     <a href="javascript:void(0)" target="">                         <div class="col-sm-4 hidden-xs slideText hidden">                                 <h2>Roll-A-Dock aerial view</h2>                          </div>                         <img width="1270" class="img-responsive " src="v-636758978575008469/format/jpg/width/1270/Files/Images/Hewitt/Slideshows/Roll-A-Dock_slide-3.jpg" alt="Roll-A-Dock aerial view" title="Roll-A-Dock aerial view">                     </a>                 </li>                 <li style="float: left; list-style: none; position: relative; width: 100px;">                     <a href="javascript:void(0)" target="">                         <div class="col-sm-4 hidden-xs slideText hidden">                                 <h2>Roll-A-Dock with chair</h2>                          </div>                         <img width="1270" class="img-responsive " src="v-636758978575008469/format/jpg/width/1270/Files/Images/Hewitt/Slideshows/Roll-A-Dock_slide-4.jpg" alt="Roll-A-Dock with chair" title="Roll-A-Dock with chair">                     </a>                 </li>                 <li style="float: left; list-style: none; position: relative; width: 100px;">                     <a href="javascript:void(0)" target="">                         <div class="col-sm-4 hidden-xs slideText hidden">                                 <h2>Roll-A-Dock with lifts &amp; cover</h2>                          </div>                         <img width="1270" class="img-responsive " src="v-636758978575038470/format/jpg/width/1270/Files/Images/Hewitt/Slideshows/Roll-A-Dock_slide-5.jpg" alt="Roll-A-Dock with lifts &amp; cover" title="Roll-A-Dock with lifts &amp; cover">                     </a>                 </li>                 <li style="float: left; list-style: none; position: relative; width: 100px;">                     <a href="javascript:void(0)" target="">                         <div class="col-sm-4 hidden-xs slideText hidden">                                 <h2>Roll-A-Dock configuration</h2>                          </div>                         <img width="1270" class="img-responsive " src="v-636758978575038470/format/jpg/width/1270/Files/Images/Hewitt/Slideshows/Roll-A-Dock_slide-6.jpg" alt="Roll-A-Dock configuration" title="Roll-A-Dock configuration">                     </a>                 </li>                 <li style="float: left; list-style: none; position: relative; width: 100px;">                     <a href="javascript:void(0)" target="">                         <div class="col-sm-4 hidden-xs slideText hidden">                                 <h2>Simple configuration</h2>                          </div>                         <img width="1270" class="img-responsive " src="v-636758978575048479/format/jpg/width/1270/Files/Images/Hewitt/Slideshows/Roll-A-Dock_slide-7.jpg" alt="Simple configuration" title="Simple configuration">                     </a>                 </li>                 <li style="float: left; list-style: none; position: relative; width: 100px;">                     <a class="slideshowFancybox"  href="https://youtu.be/wLDuxlirxKY" target=""> <i class="fa fa-play-circle slideshowVideoIcon"></i>                             <div class="col-sm-4 hidden-xs slideText hidden">                                 <h2>Roll-A-Dock fishing</h2>                          </div>                         <img width="1270" class="img-responsive " src="v-636758984126549480/format/jpg/width/1270/Files/Images/Hewitt/Slideshows/Roll-A-Dock_slide-8.jpg" alt="Roll-A-Dock fishing" title="Roll-A-Dock fishing">                     </a>                 </li>         <li style="float: left; list-style: none; position: relative; width: 100px;" class="bx-clone">                     <a href="javascript:void(0)" target="">                         <div class="col-sm-4 hidden-xs slideText hidden">                                 <h2>Launching Roll-A-Dock</h2>                          </div>                         <img width="1270" class="img-responsive " src="v-636759009248943866/format/jpg/width/1270/Files/Images/Hewitt/Slideshows/Roll-A-Dock_slide-0.jpg" alt="Launching Roll-A-Dock" title="Launching Roll-A-Dock">                     </a>                 </li></ul></div><div class="bx-controls"></div></div>         <div class="bx-pager">             <div class="bx-wrapper" style="max-width: 1518px; margin: 0px auto;"><div class="bx-viewport" style="width: 100%; overflow: hidden; position: relative; height: 0px;"><ul style="width: 1115%; position: relative; transition-duration: 0s; transform: translate3d(0px, 0px, 0px);">                         <li style="float: left; list-style: none; position: relative; width: 16.6667px;">                             <a data-slide-index="0" href="" class="active"><img width="450" class="img-responsive " src="v-636759009248943866/format/jpg/width/450/Files/Images/Hewitt/Slideshows/Roll-A-Dock_slide-0.jpg" alt="Launching Roll-A-Dock" title="Launching Roll-A-Dock"></a>                                                        </li>                         <li style="float: left; list-style: none; position: relative; width: 16.6667px;">                             <a data-slide-index="1" href=""><img width="450" class="img-responsive " src="v-636758978574998469/format/jpg/width/450/Files/Images/Hewitt/Slideshows/Roll-A-Dock_slide-1.jpg" alt="Roll-A-Dock with Cantilever Lifts" title="Roll-A-Dock with Cantilever Lifts"></a>                                                        </li>                         <li style="float: left; list-style: none; position: relative; width: 16.6667px;">                             <a data-slide-index="2" href=""><img width="450" class="img-responsive " src="v-636758978575008469/format/jpg/width/450/Files/Images/Hewitt/Slideshows/Roll-A-Dock_slide-2.jpg" alt="T shaped Roll-A-Dock" title="T shaped Roll-A-Dock"></a>                                                        </li>                         <li style="float: left; list-style: none; position: relative; width: 16.6667px;">                             <a data-slide-index="3" href=""><img width="450" class="img-responsive " src="v-636758978575008469/format/jpg/width/450/Files/Images/Hewitt/Slideshows/Roll-A-Dock_slide-3.jpg" alt="Roll-A-Dock aerial view" title="Roll-A-Dock aerial view"></a>                                                        </li>                         <li style="float: left; list-style: none; position: relative; width: 16.6667px;">                             <a data-slide-index="4" href=""><img width="450" class="img-responsive " src="v-636758978575008469/format/jpg/width/450/Files/Images/Hewitt/Slideshows/Roll-A-Dock_slide-4.jpg" alt="Roll-A-Dock with chair" title="Roll-A-Dock with chair"></a>                                                        </li>                         <li style="float: left; list-style: none; position: relative; width: 16.6667px;">                             <a data-slide-index="5" href=""><img width="450" class="img-responsive " src="v-636758978575038470/format/jpg/width/450/Files/Images/Hewitt/Slideshows/Roll-A-Dock_slide-5.jpg" alt="Roll-A-Dock with lifts &amp; cover" title="Roll-A-Dock with lifts &amp; cover"></a>                                                        </li>                         <li style="float: left; list-style: none; position: relative; width: 16.6667px;">                             <a data-slide-index="6" href=""><img width="450" class="img-responsive " src="v-636758978575038470/format/jpg/width/450/Files/Images/Hewitt/Slideshows/Roll-A-Dock_slide-6.jpg" alt="Roll-A-Dock configuration" title="Roll-A-Dock configuration"></a>                                                        </li>                         <li style="float: left; list-style: none; position: relative; width: 16.6667px;">                             <a data-slide-index="7" href=""><img width="450" class="img-responsive " src="v-636758978575048479/format/jpg/width/450/Files/Images/Hewitt/Slideshows/Roll-A-Dock_slide-7.jpg" alt="Simple configuration" title="Simple configuration"></a>                                                        </li>                         <li style="float: left; list-style: none; position: relative; width: 16.6667px;">                             <a data-slide-index="8" href=""><img width="450" class="img-responsive " src="v-636758984126549480/format/jpg/width/450/Files/Images/Hewitt/Slideshows/Roll-A-Dock_slide-8.jpg" alt="Roll-A-Dock fishing" title="Roll-A-Dock fishing"></a>                                                        </li>              </ul></div><div class="bx-controls bx-has-controls-direction"><div class="bx-controls-direction"><a class="bx-prev" href=""></a><a class="bx-next" href=""></a></div></div></div>         </div>     </aside>  function onLoadGrpLandingPage() { var $  hiddenParagraph = $  (".hiddenParagraph").parents("div.row").hide(); var $  toggleBtnControl = $  (".toggleContentControl .paragraphButton .btn"); var $  obj_slider = $  ('#thumbnailSlideShowContainer > ul').bxSlider({     pagerCustom: '.bx-pager',     slideMargin: 0,     autoReload: true,     controls: false }); var $  obj_pager = $  ('.bx-pager > ul').bxSlider({     slideMargin: 0,     autoReload: false,     infiniteLoop: false,     pager: false,     controls: true,     breaks: [         {screen: 0, slides: 2, pager: false},         {screen: 460, slides: 3},         {screen: 768, slides: 6}     ] });  $  toggleBtnControl.click(function (e) {     var $  this = $  (this);     var $  text = $  this.text();         e.preventDefault();     $  obj_slider.redrawSlider();     $  obj_pager.redrawSlider();     $  hiddenParagraph.slideToggle("fast", function () {         $  (this).find(".hiddenParagraph").slideToggle("fast");      });         $  ("html, body").animate({ scrollTop: 200 }, "slow");         $  this.text($  text == "More Information" ? "Less Information" : "More Information"); }) } 

What should i do to display the slider normally?