Disable Bootstrap Collapse after first click

Question

I have a page, on which I applied the bootstrap class Collapse, where when clicking it expands a certain area and the page scrolls to that part of the site. I want, when clicking and expanding this area, the button to lose this functionality, that is, when expanded, even if the user clicks the button again, the area remains open and does not close. You can do this in css or only in javascript?

Answer 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 click on the button:

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

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

});

Answer 2

The bootstrap Collapse has a number 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 closing.

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)