Bootstrap Accordion

To create an Accordion in Bootstrap, you can try to run the following code

Example

<!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 = "container">
         <h2>My Website</h2>
         <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 = "#coll1">Tutorials</a>
                  </h4>
               </div>
               <div id = "coll1" class = "panel-collapse collapse in">
                  <div class = "panel-body">We provide tutorials on C, C++, Java, PHP, Networking, SEO, C++, C, etc.</div>
               </div>
            </div>
            <div class = "panel panel-default">
               <div class = "panel-heading">
                  <h4 class = "panel-title">
                     <a data-toggle = "collapse" data-parent = "#accordion" href = "#coll2">Quiz</a>
                  </h4>
               </div>
               <div id = "coll2" class = "panel-collapse collapse">
                  <div class = "panel-body">We provide quizzes on C, C++, Java, PHP, Ruby, DBMS, Networking, SEO, etc.</div>
               </div>
            </div>
         </div>
      </div>
   </body>
</html>

karthikeya Boyini

I love programming (: That's all I know

Updated on: 12-Jun-2020

214 Views

Kickstart Your Career

Get certified by completing the course

Get Started