accordeon klick and close again

3 replies · opened Jul 14, 2016

SSemicolon WebSTAFFJul 15, 2016

Hello,

Unfortunately, this is currently not supported with the Bootstrap Tabs: http://getbootstrap.com/javascript/#tabs that you are using for this Component.

Do let us know if we can help you with anything else or if you find any further issues with Canvas.

KkarnowskiJul 18, 2016

ok ... i wrote this code in to function.js


$(function() {

    var active = $('a[data-toggle="tab"]').parents('.active').length;
    var tabClicked = false;

    // Closes current active tab (toggle and pane):
    var close = function() {
        $('a[data-toggle="tab"]').parent().removeClass('active');
        $('.tab-pane.active').removeClass('active');
        active = null;
    }

    // Closing active tab when clicking on toggle:
    $('[data-toggle=tab]').click(function(){
        if ($(this).parent().hasClass('active')){
            $($(this).attr("href")).toggleClass('active');
            active = null;
        } else {
            tabClicked = true;
            active = this;
        }
    });

    // Closing active tab when clicking outside tab context (toggle and pane):
    $(document).on('click.bs.tab.data-api', function(event) {
        if(active && !tabClicked && !$(event.target).closest('.tab-pane.active').length) {
            close();
        }

        tabClicked = false;
    });

    // Closing active tab on ESC key release:
    $(document).keyup(function(e){
        if(active && e.keyCode === 27) { // ESC
            close();
        }
    });
});

just if someone later ask for it

SSemicolon WebSTAFFJul 19, 2016

Hello,

Wow! This is Amazing! :)

Just checked this out and it works great! Thank You so much for this Valuable Snippet of Code. This would definitely be useful for many users.

Do let us know if we can help you with anything else or if you find any further issues with Canvas.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard