Nuestro grupo redactor ha estado mucho tiempo buscando para dar espuestas a tus dudas, te brindamos la respuesta de modo que nuestro deseo es resultarte de mucha ayuda.
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,");
Si estás de acuerdo, tienes la libertad de dejar un tutorial acerca de qué te ha impresionado de esta sección.