Cree acordeones que se contraen verticalmente en combinación con nuestro complemento Collapse JavaScript.

Cómo funciona

El acordeón utiliza el colapso internamente para hacerlo plegable. Para renderizar un acordeón expandido, agregue el .open clase en el .accordion.

El efecto de animación de este componente depende de la prefers-reduced-motion consulta de medios. Consulte la sección de movimiento reducido de nuestra documentación de accesibilidad.

Ejemplo

Haga clic en los acordeones a continuación para expandir / contraer el contenido del acordeón.

<divclass="accordion"id="accordionExample"><divclass="accordion-item"><h2class="accordion-header"id="headingOne"><buttonclass="accordion-button"type="button"data-bs-toggle="collapse"data-bs-target="#collapseOne"aria-expanded="true"aria-controls="collapseOne">
        Accordion Item #1
      button>h2><divid="collapseOne"class="accordion-collapse collapse show"aria-labelledby="headingOne"data-bs-parent="#accordionExample"><divclass="accordion-body"><strong>This is the first item's accordion body.strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-bodycode>, though the transition does limit overflow.
      div>div>div><divclass="accordion-item"><h2class="accordion-header"id="headingTwo"><buttonclass="accordion-button collapsed"type="button"data-bs-toggle="collapse"data-bs-target="#collapseTwo"aria-expanded="false"aria-controls="collapseTwo">
        Accordion Item #2
      button>h2><divid="collapseTwo"class="accordion-collapse collapse"aria-labelledby="headingTwo"data-bs-parent="#accordionExample"><divclass="accordion-body"><strong>This is the second item's accordion body.strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-bodycode>, though the transition does limit overflow.
      div>div>div><divclass="accordion-item"><h2class="accordion-header"id="headingThree"><buttonclass="accordion-button collapsed"type="button"data-bs-toggle="collapse"data-bs-target="#collapseThree"aria-expanded="false"aria-controls="collapseThree">
        Accordion Item #3
      button>h2><divid="collapseThree"class="accordion-collapse collapse"aria-labelledby="headingThree"data-bs-parent="#accordionExample"><divclass="accordion-body"><strong>This is the third item's accordion body.strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-bodycode>, though the transition does limit overflow.
      div>div>div>div>

Enjuagar

Agregar .accordion-flush para eliminar el predeterminado background-color, algunos bordes y algunas esquinas redondeadas para renderizar acordeones de borde a borde con su contenedor principal.

<divclass="accordion accordion-flush"id="accordionFlushExample"><divclass="accordion-item"><h2class="accordion-header"id="flush-headingOne"><buttonclass="accordion-button collapsed"type="button"data-bs-toggle="collapse"data-bs-target="#flush-collapseOne"aria-expanded="false"aria-controls="flush-collapseOne">
        Accordion Item #1
      button>h2><divid="flush-collapseOne"class="accordion-collapse collapse"aria-labelledby="flush-headingOne"data-bs-parent="#accordionFlushExample"><divclass="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flushcode> class. This is the first item's accordion body.div>div>div><divclass="accordion-item"><h2class="accordion-header"id="flush-headingTwo"><buttonclass="accordion-button collapsed"type="button"data-bs-toggle="collapse"data-bs-target="#flush-collapseTwo"aria-expanded="false"aria-controls="flush-collapseTwo">
        Accordion Item #2
      button>h2><divid="flush-collapseTwo"class="accordion-collapse collapse"aria-labelledby="flush-headingTwo"data-bs-parent="#accordionFlushExample"><divclass="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flushcode> class. This is the second item's accordion body. Let's imagine this being filled with some actual content.div>div>div><divclass="accordion-item"><h2class="accordion-header"id="flush-headingThree"><buttonclass="accordion-button collapsed"type="button"data-bs-toggle="collapse"data-bs-target="#flush-collapseThree"aria-expanded="false"aria-controls="flush-collapseThree">
        Accordion Item #3
      button>h2><divid="flush-collapseThree"class="accordion-collapse collapse"aria-labelledby="flush-headingThree"data-bs-parent="#accordionFlushExample"><divclass="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flushcode> class. This is the third item's accordion body. Nothing more exciting happening here in terms of content, but just filling up the space to make it look, at least at first glance, a bit more representative of how this would look in a real-world application.div>div>div>div>

Siempre abierto

Omitir el data-bs-parent atributo en cada .accordion-collapse para hacer que los artículos de acordeón permanezcan abiertos cuando se abre otro artículo.

<divclass="accordion"id="accordionPanelsStayOpenExample"><divclass="accordion-item"><h2class="accordion-header"id="panelsStayOpen-headingOne"><buttonclass="accordion-button"type="button"data-bs-toggle="collapse"data-bs-target="#panelsStayOpen-collapseOne"aria-expanded="true"aria-controls="panelsStayOpen-collapseOne">
        Accordion Item #1
      button>h2><divid="panelsStayOpen-collapseOne"class="accordion-collapse collapse show"aria-labelledby="panelsStayOpen-headingOne"><divclass="accordion-body"><strong>This is the first item's accordion body.strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-bodycode>, though the transition does limit overflow.
      div>div>div><divclass="accordion-item"><h2class="accordion-header"id="panelsStayOpen-headingTwo"><buttonclass="accordion-button collapsed"type="button"data-bs-toggle="collapse"data-bs-target="#panelsStayOpen-collapseTwo"aria-expanded="false"aria-controls="panelsStayOpen-collapseTwo">
        Accordion Item #2
      button>h2><divid="panelsStayOpen-collapseTwo"class="accordion-collapse collapse"aria-labelledby="panelsStayOpen-headingTwo"><divclass="accordion-body"><strong>This is the second item's accordion body.strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-bodycode>, though the transition does limit overflow.
      div>div>div><divclass="accordion-item"><h2class="accordion-header"id="panelsStayOpen-headingThree"><buttonclass="accordion-button collapsed"type="button"data-bs-toggle="collapse"data-bs-target="#panelsStayOpen-collapseThree"aria-expanded="false"aria-controls="panelsStayOpen-collapseThree">
        Accordion Item #3
      button>h2><divid="panelsStayOpen-collapseThree"class="accordion-collapse collapse"aria-labelledby="panelsStayOpen-headingThree"><divclass="accordion-body"><strong>This is the third item's accordion body.strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-bodycode>, though the transition does limit overflow.
      div>div>div>div>

Accesibilidad

Lea la sección de accesibilidad contraída para obtener más información.

Hablar con descaro a

Variables

$accordion-padding-y:                     1rem;$accordion-padding-x:                     1.25rem;$accordion-color:$body-color;$accordion-bg:$body-bg;$accordion-border-width:$border-width;$accordion-border-color:rgba($black, .125);$accordion-border-radius:$border-radius;$accordion-inner-border-radius:subtract($accordion-border-radius,$accordion-border-width);$accordion-body-padding-y:$accordion-padding-y;$accordion-body-padding-x:$accordion-padding-x;$accordion-button-padding-y:$accordion-padding-y;$accordion-button-padding-x:$accordion-padding-x;$accordion-button-color:$accordion-color;$accordion-button-bg:$accordion-bg;$accordion-transition:$btn-transition, border-radius .15s ease;$accordion-button-active-bg:tint-color($component-active-bg, 90%);$accordion-button-active-color:shade-color($primary, 10%);$accordion-button-focus-border-color:$input-focus-border-color;$accordion-button-focus-box-shadow:$btn-focus-box-shadow;$accordion-icon-width:                    1.25rem;$accordion-icon-color:$accordion-color;$accordion-icon-active-color:$accordion-button-active-color;$accordion-icon-transition:               transform .2s ease-in-out;$accordion-icon-transform:rotate(-180deg);$accordion-button-icon:url("data:image/svg+xml,");$accordion-button-active-icon:url("data:image/svg+xml,");