Cycle2 display issue from display none to display block

Question

i have a page with a carousel slideshow using cycle2 plugin

the page at first will have the slideshow display:none and will be displayed after user click on a button.

the problem is the slideshow is showing up stacked on each other because it though that the width of the display is 0 as shown in bellow picture

slideshow content stacking

the slideshow will be correctly displayed if i resized the browser

im looking for a way to either reinit the cycle2 with the specified html specification or tell the cycle2 that it need to refresh like when browser resized.

simplified fiddle code

code used (Umbraco)

            <div class="solutionButtonDescContent col-md-12" id="@buttonContent">    <span id="@carouselLeftID" class="carouselControlLeft"><</span>
                                        <span id="@carouselRightID" class="carouselControlRight">></span>              
                                        <div class="cycle-slideshow"
                                             data-cycle-fx=carousel
                                             data-cycle-timeout=10000
                                             data-cycle-carousel-visible=3
                                             data-cycle-carousel-fluid=true
                                             data-cycle-center-horz=true
                                             data-cycle-center-vert=true
                                             data-cycle-next="@carouselRight"
                                             data-cycle-prev="@carouselLeft"
                                             data-cycle-slides="> .@carouselID">
                                            @{
                                                foreach (var featureItems in item.Children)
                                                {
                                                    dynamic featureIcon = Umbraco.Media((int)featureItems.iconImage);
                                                    <div class="@carouselID">
                                                        <div class="row featureItemRow">
                                                            <div class="col-md-12">
                                                                <div class="row ">
                                                                    <div class="col-md-12">
                                                                        <img class="featureItemsIcon" src="@itemIcon.umbracoFile"  />
                                                                    </div>
                                                                    <div class="col-md-12 featureItemsName">
                                                                        @featureItems.Name
                                                                    </div>
                                                                    <div class="col-md-12 featureItemsDescription">
                                                                        @featureItems.description
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                }
                                            }
                                        </div>  
                                        </div>  

the jquery used to display

$(".solutionItemSummaryButton").click(function () {
    var content = $(this).attr("id") + "Content";

    $('#' + content).fadeToggle("fast", "linear");
});