Table of Contents

1 Simple example

Home

Web Front-end

Bootstrap Tutorial

In-depth explanation of how to use the accordion component in Bootstrap (example)

青灯夜游

Nov 26, 2021 pm 07:51 PM

bootstrap

How to add accordion in

Bootstrap? The following article will explain how to use the Bootstrap5 accordion component through code examples. I hope it will be helpful to you!

In-depth explanation of how to use the accordion component in Bootstrap (example)

1 Simple example

The Accordion component is very similar to tabs, except that it is not arranged horizontally, but vertically, combined with the The included JavaScript plug-in can realize folded vertical content without handwriting js. Accordions are commonly used in backend panel vertical navigation menus, frontend collapse messages, etc. [Related recommendations: "bootstrap tutorial"]

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>滑动窗口</title>
  </head>
  <body>
    <div>
      <br><br><br>
    <div id="accordionExample">
        <div>
        <h2 id="headingOne">
        <button type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          李白
        </button>
        </h2>
        <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
        <div>
          <strong>李白（701年－762年）</strong>  ，字太白，号青莲居士，又号“谪仙人”，是唐代伟大的浪漫主义诗人，被后人誉为“诗仙”。代表作有《望庐山瀑布》《行路难》《蜀道难》《将进酒》《梁甫吟》《早发白帝城》等多首。
        </div>
        </div>
        </div>
        <div>
        <h2 id="headingTwo">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          杜甫
        </button>
        </h2>
        <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
        <div>
          <strong>杜甫（712年—770年）</strong>
          ，字子美，原籍湖北襄阳，后徙河南巩县。唐代伟大的现实主义诗人，
          与李白合称“李杜”。杜甫在中国古典诗歌中的影响非常深远，被后人称为“诗圣”，他的诗被称为“诗史”。
          杜甫创作了《登高》《春望》《北征》《三吏》《三别》等名作。
        </div>
        </div>
        </div>
        <div>
        <h2 id="headingThree">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          白居易
        </button>
        </h2>
        <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
        <div>
          <strong>白居易（772年－846年）</strong> 
          ，字乐天，号香山居士，又号醉吟先生，祖籍山西太原。
          是唐代伟大的现实主义诗人，白居易的诗歌题材广泛，形式多样，语言平易通俗，有“诗魔”和“诗王”之称。
          有《白氏长庆集》传世，代表诗作有《长恨歌》、《卖炭翁》、《琵琶行》等。
        </div>
        </div>
        </div>
        </div>

      </div>
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

In-depth explanation of how to use the accordion component in Bootstrap (example)

##2 Accordion component structure

2.1 Container

Accordion Components must be included in the accordion container

<div class="accordion">..</div>

2.2 Accordion entries

An accordion component has many entries, such as the above example, and the following is one entry. Each entry contains a title and content.

<div class="accordion-item">
        <h2 class="accordion-header" id="headingTwo">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          杜甫
        </button>
        </h2>
        <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
        <div class="accordion-body">
          <strong>杜甫（712年—770年）</strong>
          ，字子美，原籍湖北襄阳，后徙河南巩县。唐代伟大的现实主义诗人，
          与李白合称“李杜”。杜甫在中国古典诗歌中的影响非常深远，被后人称为“诗圣”，他的诗被称为“诗史”。
          杜甫创作了《登高》《春望》《北征》《三吏》《三别》等名作。
        </div>
        </div>
        </div>

2.3 Entry title

The following code is the title of the entry. It contains an h2 tag and a button. In fact, you only need to modify the text and

data-bs in the following button The value of -target is enough.

 <h2 class="accordion-header" id="headingTwo">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          杜甫
        </button>
        </h2>

2.4 Entry content

The following code is the content of the entry. Similarly, you only need to correspond to the value of the outermost id and

data-bs-target .

The entry content can contain any html code and text, lists, pictures, etc.

<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
        <div class="accordion-body">
          杜甫（712年—770年
          ，字子美，原籍湖北襄阳，后徙河南巩县。唐代伟大的现实主义诗人，
          与李白合称“李杜”。杜甫在中国古典诗歌中的影响非常深远，被后人称为“诗圣”，他的诗被称为“诗史”。
          杜甫创作了《登高》《春望》《北征》《三吏》《三别》等名作。
        </div>
        </div>

3 Next to style

Remove the default background color, some borders, and some rounded corners so that the accordion is right next to its parent container. Just add accordion-flush to the container.

<div class="accordion accordion-flush">

The following code shows the difference between the two styles. Pay attention to the upper, lower, left, right and four corners below. In addition, it should be noted that two accordion components must define different IDs on the same page, otherwise it will be easy to control confusion.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>滑动窗口</title>
  </head>
  <body>
    <div>
      <br><br><br>
    <div id="accordionExample">
        <div>
        <h2 id="headingOne">
        <button type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          李白
        </button>
        </h2>
        <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
        <div>
          <strong>李白（701年－762年）</strong>  ，字太白，号青莲居士，又号“谪仙人”，是唐代伟大的浪漫主义诗人，被后人誉为“诗仙”。代表作有《望庐山瀑布》《行路难》《蜀道难》《将进酒》《梁甫吟》《早发白帝城》等多首。
        </div>
        </div>
        </div>
        <div>
        <h2 id="headingTwo">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          杜甫
        </button>
        </h2>
        <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
        <div>
          <strong>杜甫（712年—770年）</strong>
          ，字子美，原籍湖北襄阳，后徙河南巩县。唐代伟大的现实主义诗人，
          与李白合称“李杜”。杜甫在中国古典诗歌中的影响非常深远，被后人称为“诗圣”，他的诗被称为“诗史”。
          杜甫创作了《登高》《春望》《北征》《三吏》《三别》等名作。
        </div>
        </div>
        </div>
        <div>
        <h2 id="headingThree">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          白居易
        </button>
        </h2>
        <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
        <div>
          <strong>白居易（772年－846年）</strong> 
          ，字乐天，号香山居士，又号醉吟先生，祖籍山西太原。
          是唐代伟大的现实主义诗人，白居易的诗歌题材广泛，形式多样，语言平易通俗，有“诗魔”和“诗王”之称。
          有《白氏长庆集》传世，代表诗作有《长恨歌》、《卖炭翁》、《琵琶行》等。
        </div>
        </div>
        </div>
        </div>

        <br><br><br>
    <div class="accordion accordion-flush" id="accordionExample2">
        <div>
        <h2 id="headingOne2">
        <button type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne2" aria-expanded="true" aria-controls="collapseOne">
          李白
        </button>
        </h2>
        <div id="collapseOne2" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample2">
        <div>
          <strong>李白（701年－762年）</strong>  ，字太白，号青莲居士，又号“谪仙人”，是唐代伟大的浪漫主义诗人，被后人誉为“诗仙”。代表作有《望庐山瀑布》《行路难》《蜀道难》《将进酒》《梁甫吟》《早发白帝城》等多首。
        </div>
        </div>
        </div>
        <div>
        <h2 id="headingTwo2">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo2" aria-expanded="false" aria-controls="collapseTwo">
          杜甫
        </button>
        </h2>
        <div id="collapseTwo2" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample2">
        <div>
          <strong>杜甫（712年—770年）</strong>
          ，字子美，原籍湖北襄阳，后徙河南巩县。唐代伟大的现实主义诗人，
          与李白合称“李杜”。杜甫在中国古典诗歌中的影响非常深远，被后人称为“诗圣”，他的诗被称为“诗史”。
          杜甫创作了《登高》《春望》《北征》《三吏》《三别》等名作。
        </div>
        </div>
        </div>
        <div>
        <h2 id="headingThree2">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree2" aria-expanded="false" aria-controls="collapseThree">
          白居易
        </button>
        </h2>
        <div id="collapseThree2" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample2">
        <div>
          <strong>白居易（772年－846年）</strong> 
          ，字乐天，号香山居士，又号醉吟先生，祖籍山西太原。
          是唐代伟大的现实主义诗人，白居易的诗歌题材广泛，形式多样，语言平易通俗，有“诗魔”和“诗王”之称。
          有《白氏长庆集》传世，代表诗作有《长恨歌》、《卖炭翁》、《琵琶行》等。
        </div>
        </div>
        </div>
        </div>
        
        
      </div>
     <script  ></script>
  </body>
</html>

In-depth explanation of how to use the accordion component in Bootstrap (example)

4 Accordion component usage list

Accordion component entry content can be a list, which is generally used in the background navigation panel and front-end side folding news. You can use the text generic class to format text alignment. Or use css to redefine the style of the list display.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>手风琴组件</title>
  </head>
  <body>
    <div>
      <br><br><br>
    <div id="accordionExample">
        <div>
        <h2 id="headingOne">
        <button type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          文章管理
        </button>
        </h2>
        <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
        <div>
          <ul>
              <li>分类管理</li>
              <li>文章列表</li>
              <li>添加文章</li>
          </ul>
        </div>
        </div>
        </div>
        <div>
        <h2 id="headingTwo">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          网站管理
        </button>
        </h2>
        <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
        <div>
            <ul>
                <li>网站设置</li>
                <li>风格选择</li>
                <li>插件管理</li>
            </ul>
        </div>
        </div>
        </div>
        <div>
        <h2 id="headingThree">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          会员管理
        </button>
        </h2>
        <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
        <div>
            <ul>
                <li>普通会员</li>
                <li>VIP会有</li>
            </ul>
        </div>
        </div>
        </div>
        </div>

      </div>
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

In-depth explanation of how to use the accordion component in Bootstrap (example)

For more knowledge about bootstrap, please visit:

bootstrap basic tutorial! !

The above is the detailed content of In-depth explanation of how to use the accordion component in Bootstrap (example). For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undress AI Tool

Undress images for free

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

How to report an impersonation account on Instagram

4 weeks ago By 下次还敢

How to Change ChatGPT Personality in Settings (Cynic, Robot, Listener, Nerd)

3 weeks ago By DDD

How to Fight Eris in Neon Abyss

4 weeks ago By Jack chen

Steal a Brainrot Rebirth Guide: How to Do It & What You Get

3 weeks ago By Jack chen

Terminull Brigade: Best Aurora Build Guide

2 weeks ago By DDD

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

PHP Tutorial

1607

276

Setting up and using Magic Mouse in Windows

Related knowledge

How to use bootstrap in vue Apr 07, 2025 pm 11:33 PM

Using Bootstrap in Vue.js is divided into five steps: Install Bootstrap. Import Bootstrap in main.js. Use the Bootstrap component directly in the template. Optional: Custom style. Optional: Use plug-ins.

How to write split lines on bootstrap Apr 07, 2025 pm 03:12 PM

There are two ways to create a Bootstrap split line: using the tag, which creates a horizontal split line. Use the CSS border property to create custom style split lines.

How to verify bootstrap date Apr 07, 2025 pm 03:06 PM

To verify dates in Bootstrap, follow these steps: Introduce the required scripts and styles; initialize the date selector component; set the data-bv-date attribute to enable verification; configure verification rules (such as date formats, error messages, etc.); integrate the Bootstrap verification framework and automatically verify date input when form is submitted.

How to view the date of bootstrap Apr 07, 2025 pm 03:03 PM

Answer: You can use the date picker component of Bootstrap to view dates in the page. Steps: Introduce the Bootstrap framework. Create a date selector input box in HTML. Bootstrap will automatically add styles to the selector. Use JavaScript to get the selected date.

How to set up the framework for bootstrap Apr 07, 2025 pm 03:27 PM

To set up the Bootstrap framework, you need to follow these steps: 1. Reference the Bootstrap file via CDN; 2. Download and host the file on your own server; 3. Include the Bootstrap file in HTML; 4. Compile Sass/Less as needed; 5. Import a custom file (optional). Once setup is complete, you can use Bootstrap's grid systems, components, and styles to create responsive websites and applications.

How to insert pictures on bootstrap Apr 07, 2025 pm 03:30 PM

There are several ways to insert images in Bootstrap: insert images directly, using the HTML img tag. With the Bootstrap image component, you can provide responsive images and more styles. Set the image size, use the img-fluid class to make the image adaptable. Set the border, using the img-bordered class. Set the rounded corners and use the img-rounded class. Set the shadow, use the shadow class. Resize and position the image, using CSS style. Using the background image, use the background-image CSS property.

10 latest tools for web developers May 07, 2025 pm 04:48 PM

Web development design is a promising career field. However, this industry also faces many challenges. As more businesses and brands turn to the online marketplace, web developers have the opportunity to demonstrate their skills and succeed in their careers. However, as demand for web development continues to grow, the number of developers is also increasing, resulting in increasingly fierce competition. But it’s exciting that if you have the talent and will, you can always find new ways to create unique designs and ideas. As a web developer, you may need to keep looking for new tools and resources. These new tools and resources not only make your job more convenient, but also improve the quality of your work, thus helping you win more business and customers. The trends of web development are constantly changing.

How to use bootstrap button Apr 07, 2025 pm 03:09 PM

How to use the Bootstrap button? Introduce Bootstrap CSS to create button elements and add Bootstrap button class to add button text

See all articles