How to use Bootstrap Collapse Plugins

Bootstrap Web Development CSS Framework

The collapse plugin makes it easy to make collapsing divisions of the page. Whether you use it to build an accordion navigation or content boxes, it allows for a lot of content options.

You can try to run the following code to implement collapse plugins in Bootstrap −

Example

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Example</title>
      <link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet">
      <script src = "/scripts/jquery.min.js"></script>
      <script src = "/bootstrap/js/bootstrap.min.js"></script>
   </head>
   <body>
      <div class = "panel-group" id = "accordion">
         <div class = "panel panel-default">
            <div class = "panel-heading">
               <h4 class = "panel-title">
                  <a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseOne">
                     Click me to expand. Click me again to collapse.Section
                  </a>
               </h4>
            </div>
            <div id = "collapseOne" class = "panel-collapse collapse in">
               <div class = "panel-body">
                  Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
                  nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
               </div>
            </div>
         </div>
      </div>
   </body>
</html>

Smita Kapse

Updated on: 15-Jun-2020

66 Views

Kickstart Your Career

Get certified by completing the course

Get Started