bxSlider does not Reload when you click on your hidden Parent

Question

Hello

I have a slideshow that uses bxSlider and is inside a hidden DIV when loading the page. This bxSlider starts in another function I wrote below.

I have however a button to make appear all the hidden content but the slideshow is always hidden.

I’m using the bxSlider reload method but it doesn’t work.

And the html code of the slideshow inside the hidden div:

<div class="row">
<article class="container-fluid hiddenDiv">
    <aside id="slideshowContainer" class="col-xs-12 noPadding">
        <ul class="col-xs-12 noPadding">
            @foreach (var slide in slideshow)
            {
                var isVideo = slide.GetString("ItemPublisher:Item.TypeOfMedia") == "Video";
                var title = slide.GetString("ItemPublisher:Item.Title");
                var slideLink = !isVideo ? (slide.GetString("ItemPublisher:Item.Link").IsNotNullOrEmpty() ? slide.GetString("ItemPublisher:Item.Link") : "javascript:void(0)") : slide.GetString("ItemPublisher:Item.Embed").IsNotNullOrEmpty() ? slide.GetString("ItemPublisher:Item.Embed") : "javascript:void(0)";
                var text = slide.GetString("ItemPublisher:Item.Text");
                var target = slide.GetBoolean("ItemPublisher:Item.OpenInNewWindow") ? "_blank" : string.Empty;
                var videoId = slideLink.Substring(slideLink.LastIndexOf('/') + 1);
                var imagePath = slide.GetString("ItemPublisher:Item.Image");
                var imageVideoPath = string.Concat("https://img.youtube.com/vi/", videoId, "/0.jpg");
                var hasImagePath = imagePath.IsNotNullOrEmpty();
                var image = Images.GetImage(hasImagePath ? imagePath : imageVideoPath, 1270, hasImagePath ? 0 : 640);

                <li>
                    <a @(isVideo ? "class=\"fancybox\"" : string.Empty) href="@slideLink" target="@target">
                        @if (isVideo)
                        {
                            @RenderIcon("fa-play-circle slideshowVideoIcon")
                        }
                        <div class="col-sm-4 hidden-xs slideText hidden">
                            @if (title.IsNotNullOrEmpty())
                            {
                                <h2>@title</h2>
                            }
                            @text
                        </div>
                        @RenderImage(ImageSettings.CreateImage(image, title))
                    </a>
                </li>
            }
        </ul>
        <div class="bx-pager">
            <ul>
                @{
                    var count = 0;
                    foreach (var slide in slideshow)
                    {
                        var isVideo = slide.GetString("ItemPublisher:Item.TypeOfMedia") == "Video";
                        var title = slide.GetString("ItemPublisher:Item.Title");
                        var slideLink = !isVideo ? (slide.GetString("ItemPublisher:Item.Link").IsNotNullOrEmpty() ? slide.GetString("ItemPublisher:Item.Link") : "javascript:void(0)") : slide.GetString("ItemPublisher:Item.Embed").IsNotNullOrEmpty() ? slide.GetString("ItemPublisher:Item.Embed") : "javascript:void(0)";
                        var videoId = isVideo ? slideLink.Substring(slideLink.LastIndexOf('/') + 1) : "";
                        var imagePath = slide.GetString("ItemPublisher:Item.Image");
                        var imageVideoPath = string.Concat("https://img.youtube.com/vi/", videoId, "/0.jpg");
                        var hasImagePath = imagePath.IsNotNullOrEmpty();
                        var image = Images.GetImage(hasImagePath ? imagePath : imageVideoPath, 450, hasImagePath ? 0 : 150);
                        <li>
                            <a data-slide-index="@count.ToString()" href="">@RenderImage(ImageSettings.CreateImage(image, title))</a>                               
                        </li>
                        count++;
                    }
                }
            </ul>
        </div>
    </aside>
</article>
</div>
<article class="container-fluid">
    <a class="toggleContentControl"</a>   
</article>

Here’s my JS code:

function groupSection() {
var $hiddenDiv = $(".hiddenDiv ").parents("div.row").hide();
var $toggleBtnControl = $(".toggleContentControl");
var mySlider = $('#slideshowContainer> ul').bxSlider();

$toggleBtnControl.click(function (e) {
    var $this = $(this);
    var $text = $this.text();
        e.preventDefault();
    $hiddenDiv.slideToggle("fast", function () {
        $(this).find(".hiddenDiv ").slideToggle("fast"); 
        mySlider.reloadSlider();
    });
    $("html, body").animate({ scrollTop: 200 }, "slow");
    $this.text($text == "More Information" ? "Less Information" : "More Information");
    })
}

And the JS code where bxSlider is being started:

function onLoadPageSlideshow() {
if ($("#slideshowContainer").length) {
    $('#slideshowContainer> ul').bxSlider({
        pagerCustom: '.bx-pager',
        slideMargin:0,
        autoReload:true,
        controls:false
    });
    if ($(".bx-pager").length) {
        $('.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}
            ]
        });
    }
}

}

I am probably not calling bxSlider correctly again. What can I do to open it when the contents are displayed?