Рубрики

Бутстрап 4 | Accordian

В следующем примере показан простой аккордеон, расширяющий компонент панели. Использование атрибута data-parent гарантирует, что все сворачиваемые элементы в указанном родительском элементе будут закрыты при отображении одного из сворачиваемых элементов.
Есть так много типов Аккордеона

  • Аккордеон по умолчанию
  • Аккордеон с иконами
  • Аккордеон с градиентным фоном
  • Аккордеон с рисунком

Ниже вы увидите каждого из них в действии с соответствующим примером.

    Аккордеон по умолчанию: это основной Аккордеон, в этом Аккордеоне нет специальности, но вы можете легко создать этот Аккордеон самостоятельно.

  • Пример:

    <!DOCTYPE html>

    <html lang="en">

      

    <head>

        <title>Bootstrap Collapse Demonstration</title>

      

        <meta charset="utf-8">

        <meta name="viewport" 

              content="width=device-width, initial-scale=1">

      

        <link rel="stylesheet" href=

    "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

      

        <script src=

    "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">

        </script>

      

        <script src=

    "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">

        </script>

      

        <script src=

    "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">

        </script>

      

        <head>

      

            <body>

                <div class="container">

      

                    <h2 style="padding-bottom: 15px; color:green;"

                     GeeksforGeeks 

                    </h2>

                    <p>A Computer Science Portal for Geeks</p>

      

                    <div id="accordion">

                        <div class="card">

                            <div class="card-header">

                                <a class="card-link" 

                                   data-toggle="collapse"

                                   href="#description1"

                                       GeeksforGeeks 

                                 </a>

                            </div>

      

                            <div id="description1" 

                                 class="collapse show" 

                                 data-parent="#accordion">

                                <div class="card-body">

                                  GeeksforGeeks is a computer science portal.

                                  It is the best platform to lean programming.

                                </div>

                            </div>

                        </div>

      

                        <div class="card">

                            <div class="card-header">

                                <a class="collapsed card-link" 

                                   data-toggle="collapse"

                                   href="#description2"

                                   Bootstrap 

                                 </a>

                            </div>

                            <div id="description2" 

                                 class="collapse" 

                                 data-parent="#accordion">

                                <div class="card-body">

                                   Bootstrap is free and open-source 

                                   collection of tools for creating 

                                   websites and web applications.

                                </div>

                            </div>

                        </div>

      

                        <div class="card">

                            <div class="card-header">

                                <a class="collapsed card-link" 

                                   data-toggle="collapse" 

                                   href="#description3"

                                   HTML 

                                </a>

                            </div>

                            <div id="description3" 

                                 class="collapse" 

                                 data-parent="#accordion">

                                <div class="card-body">

                                  HTML stands for HyperText Markup Language. 

                                  It is used to design web pages using markup

                                  language.

                                </div>

                            </div>

                        </div>

                    </div>

                </div>

            </body>

      

    </html>

  • Выход:
  • Аккордеон со сменными значками: этот пример покажет вам, как добавлять значки плюс и минус в аккордеоне с помощью font-awesome и переключаться при открытии аккордеона с помощью jQuery.

    • Пример:

      <!DOCTYPE html>

      <html lang="en">

        

      <head>

          <meta charset="utf-8">

          <meta name="viewport" content=

              "width=device-width, initial-scale=1,

              shrink-to-fit=no">

            

          <title>Bootstrap 4 Accordion </title>

            

          <link rel="stylesheet" href=

      "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

            

          <link rel="stylesheet" href=

      "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

            

          <script src=

      "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">

          </script>

            

          <script src=

      "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">

          </script>

            

          <script src=

      "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">

          </script>

            

          <style>

              .accordion {

                  margin: 15px;

              }

                

              .accordion .fa {

                  margin-right: 0.2rem;

              }

          </style>

            

          <script>

              $(document).ready(function() {

                

                  // Add minus icon for collapse element which

                  // is open by default

                  $(".collapse.show").each(function() {

                      $(this).prev(".card-header").find(".fa")

                          .addClass("fa-minus").removeClass("fa-plus");

                  });

        

                  // Toggle plus minus icon on show hide

                  // of collapse element

                  $(".collapse").on('show.bs.collapse', function() {

                      $(this).prev(".card-header").find(".fa")

                          .removeClass("fa-plus").addClass("fa-minus");

                  }).on('hide.bs.collapse', function() {

                      $(this).prev(".card-header").find(".fa")

                          .removeClass("fa-minus").addClass("fa-plus");

                  });

              });

          </script>

      </head>

        

      <body>

          <div class="accordion">

              <h2 style="padding-bottom: 15px; color:green;"

                  GeeksforGeeks 

              </h2>

                

              <p>A Computer Science Portal for Geeks</p>

                

              <div class="accordion" id="accordionExample">

                  <div class="card">

                      <div class="card-header" id="headingOne">

                          <h2 class="mb-0">

                              <button type="button"

                                  class="btn btn-link"

                                  data-toggle="collapse"

                                  data-target="#collapseOne">

                                  <i class="fa fa-plus"></i>

                                  GeeksforGeeks

                              </button>                                

                          </h2>

                      </div>

                        

                      <div id="collapseOne" class="collapse"

                          aria-labelledby="headingOne"

                          data-parent="#accordionExample">

                          <div class="card-body">

                              <p>

                                  GeeksforGeeks is a computer

                                  science portal. It is the best

                                  platform to lean programming.

                              </p>

                          </div>

                      </div>

                  </div>

                    

                  <div class="card">

                      <div class="card-header" id="headingTwo">

                          <h2 class="mb-0">

                              <button type="button"

                                  class="btn btn-link collapsed"

                                  data-toggle="collapse"

                                  data-target="#collapseTwo">

                                  <i class="fa fa-plus"></i>

                                  Bootstrap

                              </button>

                          </h2>

                      </div>

                      <div id="collapseTwo" class="collapse show"

                          aria-labelledby="headingTwo"

                          data-parent="#accordionExample">

                          <div class="card-body">

                              <p>

                                  Bootstrap is a free and open-source

                                  collection of tools for creating

                                  websites and web applications.

                              </p>

                          </div>

                      </div>

                  </div>

                  <div class="card">

                      <div class="card-header" id="headingThree">

                          <h2 class="mb-0">

                              <button type="button"

                                  class="btn btn-link collapsed"

                                  data-toggle="collapse"

                                  data-target="#collapseThree">

                                  <i class="fa fa-plus"></i>

                                  HTML

                              </button>                    

                          </h2>

                      </div>

                      <div id="collapseThree" class="collapse"

                          aria-labelledby="headingThree"

                          data-parent="#accordionExample">

                          <div class="card-body">

                              <p>

                                  HTML stands for HyperText Markup

                                  Language. It is used to design

                                  web pages using markup language.

                              </p>

                          </div>

                      </div>

                  </div>

              </div>

          </div>

      </body>

        

      </html>

    • Выход:

    Аккордеон с градиентным фоном: это простой аккордеон с градиентными цветовыми эффектами.

    • <!DOCTYPE html>

      <html lang="en">

        

      <head>

          <title>Bootstrap Collapse Demonstration</title>

        

          <meta charset="utf-8">

          <meta name="viewport" 

                content="width=device-width, initial-scale=1">

        

          <link rel="stylesheet" href=

      "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

        

          <script src=

      "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">

          </script>

        

          <script src=

      "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">

          </script>

        

          <script src=

      "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">

          </script>

          <style>

          .card-header{

              background-image: linear-gradient(to bottom, green, yellow);

          }

          .card-body{

              background-image: linear-gradient(to right, yellow, white);

          }

          </style>

          <head>

        

              <body>

                  <div class="container">

        

                      <h2 style="padding-bottom: 15px; color:green;"

                       GeeksforGeeks 

                      </h2>

                      <p>A Computer Science Portal for Geeks</p>

        

                      <div id="accordion">

                          <div class="card">

                              <div class="card-header">

                                  <a class="card-link" 

                                  data-toggle="collapse" 

                                  href="#description1">

                                      GeeksforGeeks 

                                  </a>

                              </div>

                              <div id="description1" 

                                   class="collapse show" 

                                   data-parent="#accordion">

                                  <div class="card-body">

                                    GeeksforGeeks is a computer science portal.

                                    It is the best platform to lean programming.

                                  </div>

                              </div>

                          </div>

        

                          <div class="card">

                              <div class="card-header">

                                  <a class="collapsed card-link" 

                                     data-toggle="collapse"

                                     href="#description2"

                                     Bootstrap 

                                   </a>

                              </div>

                              <div id="description2" 

                                   class="collapse" 

                                   data-parent="#accordion">

                                  <div class="card-body">

                                     Bootstrap is a free and open-source 

                                     collection of tools for creating 

                                     websites and web applications.

                                  </div>

                              </div>

                          </div>

        

                          <div class="card">

                              <div class="card-header">

                                  <a class="collapsed card-link" 

                                     data-toggle="collapse" 

                                     href="#description3"

                                     HTML 

                                  </a>

                              </div>

                              <div id="description3" 

                                   class="collapse" 

                                   data-parent="#accordion">

                                  <div class="card-body">

                                    HTML stands for Hyper Text Markup 

                                    Language. It is used to design web 

                                    pages using markup language.

                                  </div>

                              </div>

                          </div>

                      </div>

                  </div>

              </body>

        

      </html>

    • Выход:

    Аккордеон с изображением: в этом примере аккордеон будет содержать в себе изображение.

  • Пример:

    <!DOCTYPE html>

    <html lang="en">

      

    <head>

        <title>Bootstrap Collapse Demonstration</title>

      

        <meta charset="utf-8">

        <meta name="viewport" 

              content="width=device-width, initial-scale=1">

      

        <link rel="stylesheet" href=

    "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

      

        <script src=

    "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">

        </script>

      

        <script src=

    "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">

        </script>

      

        <script src=

    "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">

        </script>

        <style>

            .card{

                width:600px;

            }

            .card-body{

                width:400px;

                float: left;

            }

            .right-body{

                width:100px;

                margin:10px;

                float : right;

            }

            img{

                width:100px;

                height:100px;

            }

        </style>

        <head>

      

            <body>

                <div class="container">

      

                    <h2 style="padding-bottom: 15px; color:green;"

                     GeeksforGeeks 

                    </h2>

                    <p>A Computer Science Portal for Geeks</p>

      

                    <div id="accordion">

                        <div class="card">

                            <div class="card-header">

                                <a class="card-link" 

                                data-toggle="collapse" 

                                href="#description1">

                                    GeeksforGeeks 

                                </a>

                            </div>

                            <div id="description1" 

                                 class="collapse show" 

                                 data-parent="#accordion">

                                <div class="card-body">

                                  GeeksforGeeks is a computer science portal.

                                  It is the best platform to lean programming.

                                </div>

                                <div class="right-body">

                                    <img src=

    "https://media.geeksforgeeks.org/wp-content/uploads/20190808143838/logsm.png">

                                </div>

                            </div>

                        </div>

      

                        <div class="card">

                            <div class="card-header">

                                <a class="collapsed card-link" 

                                   data-toggle="collapse"

                                   href="#description2"

                                   Bootstrap 

                                 </a>

                            </div>

                            <div id="description2" 

                                 class="collapse" 

                                 data-parent="#accordion">

                                <div class="card-body">

                                   Bootstrap is a free and open-source 

                                   collection of tools for creating 

                                   websites and web applications.

                                </div>

                                <div class="right-body">

                                    <img src=

    "https://media.geeksforgeeks.org/wp-content/uploads/20191126170417/logo6.png">

                                </div>

                            </div>

                        </div>

      

                        <div class="card">

                            <div class="card-header">

                                <a class="collapsed card-link" 

                                   data-toggle="collapse" 

                                   href="#description3"

                                   HTML 

                                </a>

                            </div>

                            <div id="description3" 

                                 class="collapse" 

                                 data-parent="#accordion">

                                <div class="card-body">

                                  HTML stands for Hyper Text Markup 

                                  Language. It is used to design web 

                                  pages using markup language.

                                </div>

                                <div class="right-body">

                                    <img src=

    "https://www.geeksforgeeks.org/wp-content/uploads/html-768x256.png">

                                </div>

                            </div>

                        </div>

                    </div>

                </div>

            </body>

      

    </html>

  • Выход:
  • Рекомендуемые посты:

    Бутстрап 4 | Accordian

    0.00 (0%) 0 votes