Membuat Collapse dengan Bootstrap

Membuat Collapse dengan Bootstrap

—

by

Webbiz.ID
in

Berikut adalah contoh kode untuk membuat collapse dengan menggunakan Bootstrap

HTML
<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Bootstrap</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
      <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
   </head>
   <body>
      <div class="container mt-3">
         <h4>Collapse</h4>
         <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
         Klik untuk Membuka/Collapse
         </button>
         <div class="collapse" id="collapseExample">
            <div class="card card-body">
               Ini adalah konten yang akan muncul saat collapse dibuka.
            </div>
         </div>
      </div>
   </body>
</html>
HTML
Bootstrap

Collapse

Ini adalah konten yang akan muncul saat collapse dibuka.

Dengan menggunakan kode di atas, Anda dapat membuat collapse dengan mudah menggunakan Bootstrap. Ketika tombol “Klik untuk Membuka/Collapse” ditekan, konten yang ada di dalam collapse akan muncul atau disembunyikan.

Accordion

HTML
<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Bootstrap</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
   </head>
   <body>
      <div class="container mt-3">
         <h3>Accordion</h3>
         <div id="accordion">
            <div class="card">
               <div class="card-header">
                  <a class="btn" data-bs-toggle="collapse" href="#collapseOne">
                  Collapsible Group Item #1
                  </a>
               </div>
               <div id="collapseOne" class="collapse show" data-bs-parent="#accordion">
                  <div class="card-body">
                     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                  </div>
               </div>
            </div>
            <div class="card">
               <div class="card-header">
                  <a class="collapsed btn" data-bs-toggle="collapse" href="#collapseTwo">
                  Collapsible Group Item #2
                  </a>
               </div>
               <div id="collapseTwo" class="collapse" data-bs-parent="#accordion">
                  <div class="card-body">
                     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                  </div>
               </div>
            </div>
            <div class="card">
               <div class="card-header">
                  <a class="collapsed btn" data-bs-toggle="collapse" href="#collapseThree">
                  Collapsible Group Item #3
                  </a>
               </div>
               <div id="collapseThree" class="collapse" data-bs-parent="#accordion">
                  <div class="card-body">
                     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                  </div>
               </div>
            </div>
         </div>
      </div>
   </body>
</html>
HTML
Bootstrap

Accordion

Collapsible Group Item #1
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Pastikan Anda telah menyertakan file CSS Bootstrap dan file JavaScript yang diperlukan untuk menggunakan komponen Bootstrap seperti yang ditunjukkan dalam kode di atas.

Selamat mencoba!

Artikel Terbaru ⭐