autor: Robert
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
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
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/ :)
Odpowiedzhttp://www.bootply.com/lcAAJvIVGN
Musisz do .panel-heading dodać data-toggle=”collapse” data-parent=”#accordion” data-target=”#collapseOne”
Odpowiedz