Bootstrap tutorial logo

Akordeon / Collapse

autor: Robert

5 października 2014

Jak to zwykle bywa po urlopie okazuje się, że nazbierało się tyle zaległości, że nie sposób sobie z nimi szybko poradzić. Ale znalazłem chwilę czasu by przygotować dla Was opis kolejnego elementu jaki oferuje Bootstrap. Polska nazwa to chyba akordeon, działanie polega na pokazywaniu jedynie klikniętej części z jednoczesnym ukrywaniem tej poprzednio wyświetlonej. Doskonale sprawuje się na wszelkiego rodzaju stronach z FAQ:) Akordeon można obsługiwać za pomocą data-atributes, javascriptu oraz klas w CSSie i na tej metodzie się skupię, żeby nie utrudniać ludziom którym JS jest jeszcze obcy.

Podstawowy przykład

Jak już pewnie zauważyliście, im dalej brniemy w Bootstrap tym dłuższe są przykłady przez co trudniej je opisywać. Ale mam nadzieję, że nadal robię to zrozumiale.

Zaczynamy od otwarcia diva z klasą .panel-group oraz przypisanym do niego identyfikatorem (jeśli chcemy umieścić 2 akordeony na stronie każdy z nich musi mieć unikalny identyfikator, inaczej nie będą się prawidłowo rozwijać.) Wewnątrz niego umieszczamy zmodyfikowany kod panelu.

Wewnątrz nagłówka panelu (.panel-heading) umieszczamy np znacznik h4 z klasą .panel-title a tekst wewnątrz znacznika robimy linkiem który prowadził będzie do zawartości naszego panelu (tutaj href="#collapseOne, musi on dodatkowo posiadać parametr data-toggle="collapse" oraz odwoływać się do identyfikatora naszego akordeonu poprzez data-parent="#accordion". Zamykamy znaczniki a, h4 oraz diva z klasą panel-heading

Kolejny krok to otwarcie diva z identyfikatorem do którego odwoływał się link w nagłówku panelu czyli id="collapseOne" i nadanie mu klas panel-collapse, collapse oraz wybieramy jeden panel, który będzie otwarty po wczytaniu strony i jemu dodatkowo nadajemy klasę .in a w jego wnętrzu umieszczamy standardowy kod "ciała" panelu czyli div z klasą panel-body. Na koniec zamykamy divy z klasami .panel-body, .panel-collapse oraz .panel

Procedurę powtarzamy tyle razy ile zakładek potrzebujemy. Na koniec zamykamy div z klasą .panel-group



W moim przykładzie div z identyfikatorem #collapseTwo ma dodatkowo klasę .in dlatego jest domyślnie rozwinięty


Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Post się przydał? Oceń go proszę.
1 Gwiazdka2 Gwiazdki3 Gwiazdki4 Gwiazdki5 Gwiazdek (8 głosów, średnia: 5,00 na 5)
Loading...

Arek 23 lipca 2015 o 11:07

A czy można taki akordeon ustawić w orientacji pionowej tak aby wysuwał się np. do prawej a nie do dołu?

Odpowiedz
Michał 24 lutego 2016 o 12:03

Witam mam 2 pytania.
1. Czy można dodać obok Pierwsza zakładka akordeonu strzałkę do dołu
2. Czy można zrobić taż żeby po kliknięciu w prostokąt a nie tylko w ,,Pierwsza zakładka akordeonu”
otwierał się akordeon? Z góry dziękuje :)

Odpowiedz
    Robert 24 lutego 2016 o 12:44

    1. Jeśli korzystasz z Font Awesome to do ,,Pierwsza zakładka akordeonu” dopisz <i class="fa fa-arrow-down"></i>. Jeśli nie korzystasz to jest HTMLowa encja (↓).
    2. Można:) Tutaj masz przykład -> http://jsfiddle.net/Tcgyx/15/ trzeba przenieść data-toggle="collapse" data-parent="#accordion" data-target="#collapseOne" do diva .panel-heading

    Odpowiedz
      Michał 24 lutego 2016 o 20:44

      Okej dzięki wielkie działa. A jeszcze ma jedno pytanie chciałbym tą ikonkę strzałki w dół zrobić z prawej strony bo teraz jak wkleję ten kod to przylega do nazwy.

      Odpowiedz
        Robert 25 lutego 2016 o 08:03

        Wewnątrz diva .panel-heading umieść sobie diva .row a w nim dwie kolumny, jedną .col-xs-10 w której będzie nazwa zakładki i drugą kolumnę .col-xs-2 a w niej umieść sobie strzałkę:) Ma to wyglądać mniej więcej tak:

        <div class="panel-heading">
                <div class="row">
                    <div class="col-xs-10">
                        <h4 class="panel-title">
                           
                        </h4>
                    </div>
                    <div class="col-xs-2">
                        
                    </div>
                </div>
            </div>
        

        Zastosowałem coś takiego na https://cheatsheet.kursbootstrap.pl/ :)

        Odpowiedz
      piotr 26 czerwca 2016 o 13:03

      a jak zrobić żeby cały przycisk był rozwijany, ale nie tak jak chciał kolega Michał tylko, żeby po kliknięciu w przycisk zawsze korzystał z atrybutu href ?

      Odpowiedz