flatlogic/bootstrap-tabcollapse

All accordions open on mobile

Closed this issue · 2 comments

Is there a way to tell the plugin to show all accordions on mobile (sm or xs) and make the tabs "unclickable"?

Tried this with no luck:

$('#tabs').tabCollapse({
    tabsClass: 'hidden-sm hidden-xs',
    accordionClass: 'visible-sm visible-xs'
});

@kknoer, bootstrap-tabcollapse might be the wrong plugin to achieve your goals but there is a way to do what you want to do.
Your code didn't work as planned because 'accordion-class' is applied to the whole accordion, not to the every panel in it. To make all panels shown by default on mobile you can add some custom code.

JavaScript:

$('#myTab').tabCollapse(
    {
        tabsClass: 'hidden-sm hidden-xs',
        accordionClass: 'visible-sm visible-xs panels-shown'
    }
);
$('.panels-shown .panel-title a').click(function(e) {
    e.preventDefault();
    e.stopPropagation();
});

CSS:

.panels-shown .panel-collapse {
        display: block;
        height: auto;
}

@smartapant I have actually been able to resolve my issue. You can close this issue.

Thanks!