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

---

Post się przydał? Oceń go proszę.

(9 głosów, średnia: 5,00 na 5)

Loading...

---

← Starszy post
Okienko Pop-up / Modal
Nowszy post →
Podpowiedzi do linków / Tooltips

Robert 3 sierpnia 2015 o 11:31

http://jsfiddle.net/fauzi/q9GLR/20/light/

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

Robert 28 czerwca 2016 o 08:34

http://www.bootply.com/lcAAJvIVGN

Musisz do .panel-heading dodać data-toggle=”collapse” data-parent=”#accordion” data-target=”#collapseOne”

Odpowiedz