Los acordeones son útiles cuando se desea alternar entre ocultar y mostrar una gran cantidad de contenido:
Paso 1) Agregar HTML:
< p>
< a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element
< button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element< /button>
< button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements< /button>
< /p>
< div class="row">
< div class="col">
< div class="collapse multi-collapse" id="multiCollapseExample1">
< div class="card card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
< /div>
< /div>
< /div>
< div class="col">
< div class="collapse multi-collapse" id="multiCollapseExample2">
< div class="card card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
< /div>
< /div>
< /div>
< /div>Un o puede mostrar y ocultar varios elementos haciendo referencia a ellos con un selector de JQuery en su atributo or. Múltiples o pueden mostrar y ocultar un elemento si cada uno hace referencia a él con su atributo, alternar primer elemento, alternar segundo elemento y alternar ambos elementos