Como criar um acordeão usando o bootstrap 5

Um acordeão envolve vários elementos dobráveis ​​nos quais uma enorme quantidade de dados pode ser colocada e pode ser oculta ou mostrada na preferência de um usuário. A vantagem final de usar um acordeão é que ele impede a desordem de conteúdo grande em uma única página da web. Além disso, um acordeão aprimora a experiência do usuário, reduzindo as páginas da web, diminuindo a rolagem.

Leia o artigo abaixo para saber como criar um acordeão usando o bootstrap 5.

Como criar um acordeão usando o bootstrap 5

No exemplo abaixo, vamos demonstrar como você pode criar um acordeão usando o bootstrap 5.

Html

O primeiro passo para fazer um acordeão é fazer um contêiner de divisão pai e atribuir um ID. Aqui nós atribuímos um ID rotulado como "acordeão". O objetivo deste contêiner de Div pai é esconder todos os outros elementos dobráveis ​​quando um dos elementos dobráveis ​​estão sendo mostrados.

Html

Lar



Algum parágrafo.

Para o bem deste exemplo, usaremos o componente do cartão para gerar um acordeão. Portanto, no código acima, estamos fazendo um cartão atribuindo -o o .cartão classe para um contêiner div. Depois, estamos fazendo o cabeçalho do cartão usando o .Cardeiro Classe e uma etiqueta de âncora que oculta/mostra que o conteúdo foi aninhado dentro do cabeçalho e conectado ao Div dobrável usando o ID.

Por fim, uma div foi colapsável usando o .colapso A classe e o corpo do cartão foram aninhados dentro do recipiente dobrável. Observe que data-bs-parent = "#id" Faz todos os outros colapsíveis para se esconder sob o contêiner dos pais quando um dos colapsíveis está sendo exibido.

Html

Sobre



Algum parágrafo.

Outra carta foi gerada usando a mesma técnica usada para o primeiro cartão. A única diferença é que o ID usado para conectar a tag âncora à div colapsível é diferente da usada para a primeira carta.

Html

Serviços



Algum parágrafo.

A mesma abordagem foi usada para fazer mais um cartão dobrável com um ID diferente que vincula a etiqueta de âncora ao contêiner Div dobrável.

Saída

Um acordeão foi gerado com sucesso.

Observação: Se você excluir o atributo Data-BS-Parents, os itens de acordeão permanecerão abertos enquanto outros itens são abertos.

Seguindo a técnica ilustrada acima, você pode gerar facilmente um acordeão usando o bootstrap 5.

Conclusão

Para fazer um acordeão, você deve fazer um elemento como um recipiente de div colapsível usando o .colapso classe e aninham esses elementos dobráveis ​​dentro de um elemento pai. O artigo acima faz uso de um cartão para gerar um acordeão. Um total de três cartas com um cabeçalho e um corpo foi gerado e tornado dobrável. Cada um dos cartões estava vinculado a uma etiqueta de ancoragem usada para ocultar/mostrar conteúdo colocado dentro de cada cartão dobrável. Além disso, o data-bs-parent = "#id" foi usado para esconder todos os outros colapsíveis sob o elemento pai enquanto um está sendo exibido.