Disable bootstrap collapse hide function when content is visible/expanded

Question

I have really simple question. A want to use Bootstrap 3 collapse function for showing up some content BUT i want to disable hide function.

So, when i click on some link or button, some content appears, but when content is once visible and i click on the link one more time, content should retain visible (so i can highlight content instead of hiding on link clicks see example).

My specific usecase:

<button class="reply-link note date" data-toggle="collapse" aria-expanded="false" aria-controls="reply-form" data-target="#reply-form">reply</button>
<div id="reply-form" class="collapse media">
     reply form html code ...
</div>

I want to show up reply form by reply button. Next reply button click will not hide the reply form but add focus on some reply form element.

Is there some common way how to do this by using Bootstrap 3?

Thanks.

Answer 1

1. Remove data-toggle="collapse" from your HTML.
2. Show your collapse div on click (using JS).

HTML:

<button class="reply-link note date" aria-expanded="false" aria-controls="reply-form" data-target="#reply-form">reply</button>
<div id="reply-form" class="collapse media">
     reply form html code ...
</div>

JS:

$(".reply-link").click(function () {
  $('.media').collapse('show');
});

CODEPEN

Answer 2

Handle the shown event of the collapse to disable (or hide, remove, etc..) the trigger button..

$('#collapseExample').on('shown.bs.collapse', function () {
    $('[data-toggle=collapse]').prop('disabled',true);
});

http://www.codeply.com/go/DWOCEWVPxE