All tabs being hidden when script loads in?

[chopfitzroy]

All tabs being hidden when script loads in?

            <div class="row">
                <div class="tabs" data-toggle="tabslet" data-animation="true">
                    <div class="col-md-12">
                        <ul class="list-unstyled list-inline">
                            <li class="active"><a href="#tab-1">Public</a></li>
                            <li class=""><a href="#tab-2">Private</a></li>
                            <li class=""><a href="#tab-3">Popular</a></li>
                            <li class=""><a href="#tab-4">Trending</a></li>
                            <li class=""><a href="#tab-5">New</a></li>
                        </ul>
                    </div>
                    <div id="tab-1">
                        <div class="row">
                            {{#loop 3}}
                                <div class="col-md-4">
                                    <div class="card">
                                        <div class="card-header">
                                            <div class="row">
                                                <div class="col-md-12">
                                                    Title
                                                </div>
                                            </div>
                                        </div>
                                        <div class="card-block">
                                            <div class="row">
                                                <div class="col-md-12">
                                                    Icon / Iframe
                                                </div>
                                            </div>
                                        </div>
                                        <div class="card-footer">
                                            <div class="row">
                                                <div class="col-md-12">
                                                    Info
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            {{/loop}}
                        </div>
                    </div>
                    <div id="tab-2">
                        <div class="row">
                            {{#loop 3}}
                                <div class="col-md-4">
                                    <div class="card">
                                        <div class="card-header">
                                            <div class="row">
                                                <div class="col-md-12">
                                                    Title
                                                </div>
                                            </div>
                                        </div>
                                        <div class="card-block">
                                            <div class="row">
                                                <div class="col-md-12">
                                                    Icon / Iframe
                                                </div>
                                            </div>
                                        </div>
                                        <div class="card-footer">
                                            <div class="row">
                                                <div class="col-md-12">
                                                    Info
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            {{/loop}}
                        </div>
                    </div>
                    <div id="tab-3">
                        <div class="row">
                            <p>View not available</p>
                        </div>
                    </div>
                    <div id="tab-4">
                        <div class="row">
                            <p>View not available</p>
                        </div>
                    </div>
                    <div id="tab-5">
                        <div class="row">
                            <p>View not available</p>
                        </div>
                    </div>
                </div>

            </div>

$(window).on('ready', function(){
    $('.tabs').tabslet({
        mouseevent: 'click',
        attribute: 'href',
        animation: true
    });
});

[vdw]

Tabslet hides the tabs on initialization and then activates the first one or the one set from the options or the browser link.

(comment on the code above: you can use one method to initialize Tabslet... either with javascript or with data attributes... the code above uses both ways.)

[chopfitzroy]

Having removed the javascript and just using the data- attributes it is still hiding all items, if I navigate to the url with # appended it still hides all tabs.

Cheers.