Bootstrap Collapse Panel

Published: 23.10.2019 | Last update: 3.6.2022

Bootstrap Collapsible Panel is a simple and lightweight component that can be used to toggle the visibility of content. The component provides an easy way to collapse content for improved user experience and visual clarity.

This snippet is a basic example of how to create a collapsible panel with up & down chevrons.

It uses Bootstrap 4, but it can be easily adapted for use in any framework or library.

Check out the live demo and source code below.

If you liked this snippet, you might also enjoy exploring Bootstrap Registration Page or Bootstrap 4 Accordion .

Please note that the interactive editor on this page should be viewed on your laptop or desktop for the best results.

See my free Bootstrap themes Edit this snippet

How to use the snippet

There are two ways to use the snippet:

  • a] Copy it into your project. This means:
    1. Copy content of the HTML, CSS, JavaScript tabs into your project
    2. Make sure that you have jQuery 3 and Bootstrap 4's CSS and JS included in your project too.
    3. That should be it, and you should be good to go.
  • b] Use the "Edit in JSFiddle" link in the top right and play with it in the JSFiddle. After adjusting what you need, you can use the same steps as in a] to develop it locally.
Share on Facebook Share on Twitter Share on LinkedIn