Disable Bootstrap Collapse after first click

Navigation
0

I have a page, in which I applied the bootstrap class collapse, where clicking it expands a certain area and the page scrolls to that part of the site. I want you to click and expand this area, the button loses this functionality, that is, when expanded, even when the user clicks the button again, the area remains open and does not close. Can you do this in css or just m javascript?

    
asked by anonymous 20.09.2016 / 20:34

2 answers

1

The bootstrap collapse has a series of events and you can use them to avoid getting bind and unbind from click events and etc. 

$('.panel').on('hide.bs.collapse', function (e) {
    e.preventDefault();
});

This code prevents an open panel from being closed.

There are also these events

  

show.bs.collapse Occurs when the collapsible element is about to be   shown

     

shown.bs.collapse Occurs when the collapsible element is fully shown   (after CSS transitions have completed)

     

hide.bs.collapse Occurs when the collapsible element is about to be   hidden

     

hidden.bs.collapse Occurs when the collapsible element is fully   hidden (after CSS transitions have completed)

    
21.09.2016 / 14:47
1

Instead of putting the HTML tags (data-toggle="collapse" and "data-target") on the button that shows your component, show it by js and then disable the button: 

$('#meu-botao').click(function(){

    $('#element-alvo-do-collapse').collapse('show');
    $('#meu-botao').unbind('click')

});
    
21.09.2016 / 14:25
Select with MD5 password returning empty How to select all the columns in the database