Jak ukryć/wyświetlać zawartość za pomocą klas zapadnięcia się w Bootstrap 5

Zamknięty komponent jest bardzo niezbędny, gdy chcesz wyświetlić ogromną ilość treści na jednej stronie internetowej. Zaletą używania składania się jest to, że uniemożliwia to zaśmiecanie strony internetowej z obciążeniem treści, a tym samym poprawianie wrażenia użytkownika.

Wspad, w zasadzie pozwala pokazywać i ukrywać zawartość za pomocą elementów HTML. Tutaj omówiliśmy, w jaki sposób możesz ukryć lub wyświetlać zawartość za pomocą klas zapadania się w Bootstrap 5.

Jak ukryć/wyświetlać zawartość za pomocą klas zapadnięcia się w Bootstrap 5

Jak już wspomniano, składany pozwala „pokazać i ukryć ogromne treści na stronie internetowej. Jeśli zastanawiasz się, w jaki sposób składany i używany jest do ukrywania/wyświetlania treści za pomocą Bootstrap 5, a następnie zapoznaj się z nadchodzącymi sekcjami.

Jak ukryć treść za pomocą elementu

Jednym ze sposobów utworzenia składania się jest użycie elementu.

Html

To jest jakiś kierunek

To pierwszy akapit.

To jest drugi akapit.

To jest trzeci akapit.

W powyższym kodzie kontener Div został uniesiony, przypisując mu .klasa upadku. Następnie w tej div umieszczono pewną zawartość, która będzie ukryta lub pokazana za pomocą przycisku eleganckiego.

Element jest używany do ukrywania/pokazania zawartości w zamieszek Div ​​poprzez przypisanie danych-BS-Toggle = „Zakładanie”. Ponadto Data-BS-cel = „#ID” służy do połączenia przycisku z zamulanym kontenerem Div.

Wyjście

W ten sposób możesz ukryć/wyświetlać zawartość za pomocą składanych przycisków.

Jak ukryć treść za pomocą tagu

Innym sposobem generowania składania się jest użycie tagu. Tutaj pokazaliśmy tę metodę w poniższym fragmencie kodu.

Html

Reszta kodu będzie taka sama jak powyżej, z jedyną różnicą, że tutaj użyliśmy tag wewnątrz element i kontrolować treść, którą przypisaliśmy Data-BS-Toggle = „Zakochanie się” Do znacznika kotwicy i identyfikatora łączącego ten znacznik z składającym się kontenerem Div został przypisany do atrybutu HREF.

Wyjście

Złożony został pomyślnie wykonany za pomocą znacznika kotwicy.

Jak używać .Pokaż klasę

Domyślnie treść wewnątrz składania zostanie ukryta i pokaże, kiedy przycisk lub link zostanie kliknięty. Ale jeśli chcesz, aby Twoja treść została wyświetlona domyślnie i ukryj ją po kliknięciu przycisku/linku, użyj .Pokaż klasę.

Html

Tutaj pojemnik Div ​​został przypisany .pokazywać klasa wraz z .klasa upadku. Zmieni to domyślne zachowanie składania, a treść zostanie wyświetlona domyślnie i ukryje się po kliknięciu linku.

Wyjście

.Show Class działa poprawnie.

Wniosek

W celu ukrycia lub wyświetlania treści za pomocą przypisania klasy zawalenia Data-BS-Toggle = „Zakochanie się” do element lub etykietka i połącz te elementy z wymyślonym elementem za pomocą data-BS-cel = „#id” W przypadku przycisku i href = „#id” W przypadku linku. Treść jest domyślnie ukryta w eleganckiej eliminu, jednak jeśli chcesz zmienić to domyślne zachowanie, użyj .Pokaż klasę.