bxSlider does not reload when you click on your hidden parent

Hello

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

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

I'm using the bxSlider's reloadSlider method but it does not work.

And the slideshow html code 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'm probably not calling bxSlider correctly again. What can I do to open it when the content is displayed?