O acordeão Bric fornece uma maneira de dividir e alternar entre ocultar e mostrar grandes quantidades de conteúdo. Os acordeões consistem em vários subelementos, como o Card Bric e Div recipiente Bric, o que permite que eles sejam facilmente personalizados e estilizados de forma independente.
Para adicionar mais seções de acordeão, basta selecionar um dos cartões (encontrado no contêiner div principal do acordeão) por meio da árvore de camadas e duplicá-lo usando o atalho de teclado ⌘D.
Estrutura
A estrutura de um acordeão é um pouco mais complexa do que a maioria dos outros Brics encontrado dentro Blocs. É composto por um Div recipiente Bric que tem seu Formato definido para um Recipiente de acordeão ea sua ID definido como um valor único, por exemplo acordeão-17605. Dentro deste contêiner, existem vários Card Brics. Cada carta Bric tem um Ligação Bric na seção de cabeçalho do cartão e um Div recipiente que contém a seção do corpo do cartão.
Comunicação
O acordeão Bric funções são controladas por meio do Ligação Bric (encontrado na seção de cabeçalho de um cartão) e o Div recipiente (que contém a seção do corpo do cartão). Ambos os itens têm atributos de dados personalizados aplicado a eles para dar-lhes a funcionalidade típica de acordeão e permitir que se comuniquem uns com os outros.
Elo de acordeão Bric
O link é o elemento em que você clica para revelar a seção de acordeão. Este item possui uma configuração específica que permite funcionar como parte de um acordeão. Tem o seu interação definido para Nenhum e também tem vários atributos de dados personalizados, sendo os dois mais importantes o alvo de dados e aria-controles.
Atributos de dados de link
A alvo de dados atributo tem um valor definido para uma referência única, por exemplo # acordeão-17605-item-1. O aria-controles atributo contém um valor quase idêntico ao alvo de dados atributo, mas tem o # no início removido, por exemplo acordeão-17605-item-1. Essas referências exclusivas devem corresponder ao ID do contêiner div correspondente no qual o corpo do cartão está aninhado.
Contêiner de div de acordeão
Dentro de cada cartão Bric (encontrado dentro do contêiner principal do acordeão) é um adicional Div recipiente que tem seu ID definido como um valor único, por exemplo acordeão-17605-item-1. Este valor de ID deve corresponder e corresponder aos atributos de dados personalizados, alvo de dados e aria-controles encontrado no link Bric (localizado na seção de cabeçalho do cartão).
Este contêiner div Bric também contém vários atributos de dados personalizados, sendo o mais importante pai de dados. Este valor deste atributo de dados deve corresponder ao ID do recipiente principal do acordeão, por exemplo # Accordion-17605. Este atributo de dados informa ao navegador a qual contêiner de acordeão esta seção está relacionada.
Se você fizer alterações nos atributos de dados do link de acordeão alvo de dados or aria-controles, tome cuidado para atualizar o ID para o contêiner div relevante (que contém a seção do corpo do cartão) e vice-versa.
Para obter informações mais detalhadas sobre como funcionam os acordeões, consulte o Documentos do Bootstrap 4.