Jak utworzyć akordeon za pomocą Bootstrap 5

Akordeon owija wiele składanych elementów, w których można umieścić ogromną ilość danych i można go ukryć lub pokazać na preferencjach użytkownika. Ostateczną zaletą korzystania z akordeonu jest to, że zapobiega zabójstwu dużej treści na jednej stronie internetowej. Ponadto akordeon poprawia wrażenia użytkownika poprzez skrócenie stron internetowych, zmniejszając w ten sposób przewijanie.

Przeczytaj poniższy artykuł, aby dowiedzieć się, jak utworzyć akordeon za pomocą Bootstrap 5.

Jak utworzyć akordeon za pomocą Bootstrap 5

W poniższym przykładzie zademonstrujemy, w jaki sposób możesz utworzyć akordeon za pomocą Bootstrap 5.

Html

Pierwszym krokiem w tworzeniu akordeonu jest stworzenie kontenera Div i przypisanie mu identyfikatora. Tutaj przypisaliśmy to identyfikator oznaczony jako „akordeon”. Celem tego macierzystego kontenera Div jest ukrycie wszystkich innych składanych elementów, gdy pokazano jeden z składanych elementów.

Html

Dom



Jakiś akapit.

Ze względu na ten przykład skorzystamy z komponentu karty do wygenerowania akordeonu. Dlatego w powyższym kodzie tworzymy kartę, przypisując ją .karta klasa do kontenera Div. Potem tworzymy nagłówek karty za pomocą .Header klasa i znacznik kotwicy, który ukrywa/pokazuje, że zawartość została zagnieżdżona w nagłówku i podłączona do zamontowanej div za pomocą identyfikatora.

Wreszcie, Div został zamieszany za pomocą .zawalić się klasa i korpus karty były zagnieżdżone w składanym pojemniku. Zauważ, że Data-BS-Parent = „#id” Sprawia, że ​​wszystkie inne zwłynki do ukrycia się pod Parent Div Container, gdy wyświetla się jeden z Zakaplerzy.

Html

O



Jakiś akapit.

Kolejna karta została wygenerowana przy użyciu tej samej techniki, którą zastosowano do pierwszej karty. Jedyną różnicą jest to, że identyfikator użyty do podłączenia znacznika kotwicy z wymyślonym divem różni się od tej używanej dla pierwszej karty.

Html

Usługi



Jakiś akapit.

To samo podejście zastosowano do stworzenia kolejnej splątanej karty o innym identyfikatorze, który łączy znacznik kotwicy z składanym kontenerem Div.

Wyjście

Accordion został pomyślnie wygenerowany.

Notatka: Jeśli wykluczysz atrybut danych BS-BS, elementy akordeonu pozostają otwarte, gdy inne elementy są otwierane.

Zgodnie z ilustrowaną powyższą techniką możesz łatwo wygenerować akordeon za pomocą Bootstrap 5.

Wniosek

Aby stworzyć akordeon, musisz stworzyć element taki jak kontener DIV składany .zawalić się klasa i gniazdo takie składane elementy wewnątrz elementu nadrzędnego. W powyższym artykule wykorzystuje kartę do wygenerowania akordeonu. W sumie trzy karty mające nagłówek i ciało zostały wygenerowane i zamieszane. Każda z kart była powiązana z znacznikiem kotwicy, który był używany do ukrywania/pokazywania zawartości umieszczonej w każdej zawartej karcie. Ponadto Data-BS-Parent = „#id” był używany do ukrycia wszystkich innych zawadek pod elementem nadrzędnym podczas wyświetlania.