Ask any question about Bootstrap here... and get an instant response.
Post this Question & Answer:
How can I handle the 'shown.bs.collapse' event to log a message when a Bootstrap collapse finishes expanding?
Asked on Dec 23, 2025
Answer
To handle the 'shown.bs.collapse' event in Bootstrap 5, you can use JavaScript to listen for the event and log a message when a collapse element finishes expanding.
<!-- BEGIN COPY / PASTE -->
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Accordion Item #1
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
This is the first item's accordion body.
</div>
</div>
</div>
</div>
<script>
var collapseElement = document.getElementById('collapseOne');
collapseElement.addEventListener('shown.bs.collapse', function () {
console.log('Collapse has fully expanded.');
});
</script>
<!-- END COPY / PASTE -->Additional Comment:
✅ Answered with Bootstrap 5 best practices.- The code uses an accordion component with a button to toggle the collapse.
- JavaScript listens for the 'shown.bs.collapse' event on the collapse element.
- When the event is triggered, a message is logged to the console.
- Ensure the Bootstrap JS and CSS are properly included in your project for this to work.
Recommended Links:
