Como ocultar/mostrar conteúdo usando a classe de colapso no bootstrap 5

Um componente dobrável é muito essencial quando você deseja exibir uma enorme quantidade de conteúdo em uma única página da web. A vantagem de usar um dobrável é que ele impede que você atravessa sua página da web com um monte de conteúdo e, assim, aprimorando a experiência do usuário.

Um dobrável permite que você mostre e oculte conteúdo usando elementos html. Aqui discutimos como você pode ocultar ou mostrar conteúdo usando a classe de colapso no bootstrap 5.

Como ocultar/mostrar conteúdo usando a classe de colapso no bootstrap 5

Como já mencionado, um dobrável permite que você mostre e oculte um conteúdo enorme em uma página da web. Se você está se perguntando como um dobrável é criado e usado para ocultar/mostrar conteúdo usando o bootstrap 5, consulte as próximas seções.

Como ocultar conteúdo usando um elemento

Uma maneira de criar um dobrável é usando o elemento.

Html

Este é um título

Este é o primeiro parágrafo.

Esse é o segundo parágrafo.

Este é o terceiro parágrafo.

No código acima, o contêiner div foi colapsável, atribuindo -o ao .classe de colapso. Posteriormente, algum conteúdo foi colocado dentro daquela div, que será oculta ou mostrada usando o botão dobrável.

O elemento está sendo usado para ocultar/mostrar o conteúdo dentro da div colapsível atribuindo o data-bs-toggle = "colapso". Além disso, o data-bs-target = "#id" é usado para vincular o botão ao contêiner Div dobrável.

Saída

É assim que você pode ocultar/mostrar conteúdo usando botões dobráveis.

Como ocultar conteúdo usando uma tag

Outra maneira de gerar um dobrável é usando a tag. Aqui mostramos esse método no trecho de código abaixo.

Html

O restante do código será o mesmo que acima, com a única diferença de que aqui usamos um etiqueta dentro de um elemento e para controlar o conteúdo que atribuímos o data-bs-toggle = "colapso" à tag âncora e o ID que conecta esta tag ao contêiner Div dobrável foi atribuído ao atributo href.

Saída

Um dobrável foi feito com sucesso usando a tag de âncora.

Como usar o .Mostrar aula

Por padrão, o conteúdo dentro de um dobrável será oculto e mostrará quando o botão ou o link for clicado. Mas se você deseja que seu conteúdo seja mostrado por padrão e oculte -o depois que o botão/link é clicado, use o .Mostrar aula.

Html

Aqui o contêiner div foi atribuído o .mostrar classe junto com .classe de colapso. Isso alterará o comportamento padrão do dobrável e o conteúdo será mostrado por padrão e se esconderá assim que o link for clicado.

Saída

O .A aula de show está funcionando corretamente.

Conclusão

Com o objetivo de ocultar ou mostrar conteúdo usando a classe de colapso atribuir data-bs-toggle = "colapso" para um elemento ou um marcação e vincular esses elementos ao elemento dobrável usando Data-Bs-Target = “#ID” em caso de um botão e href = "#id" Em caso de link. O conteúdo está oculto em um dobrável por padrão, no entanto, se você deseja alterar esse comportamento padrão, use o .Mostrar aula.