Strony mobilne i responsywne wprowadziły nową jakość do Internetu. Serfowanie po stronach stało się łatwe i przyjemne dzięki responsywnym nawigacjom i układom szablonów automatycznie dopasowującym się do danej rozdzielczości ekranu (telefonu lub tabletu). Niestety są elementy, które nadal sprawiają problem lub nie można ich dostosować w sposób jaki byśmy chcieli za pomocą zwykłego HTMLa, CSS np: zakładki. Jednym z lepszych rozwiązań jest ich zmiana na akordeon za pomocą jQuery. Rozwiązanie, które zaprezentuję dotyczy widżetów Bootstrapa. Chyba każdy programista o nich słyszał 😉 A jak nie to zachęcam odwiedzić:

https://getbootstrap.com/docs/4.0/components/navs/#tabs
https://getbootstrap.com/docs/4.0/components/collapse/#accordion-example

Poniżej skrypt odpowiedzialny za transformację zakładek w akordeon. Zapisz go w osobnym pliku accordion.js:

Funkcja getAccordion(element_id, screen) przyjmuje dwie wartości:

  • element_id – identyfikator listy ul (<ul id=”element_id”></ul>); w naszym przykładzie będzie to „tabs” (<ul id=”tabs”></ul>)
  • screen – rozdzielczość ekranu poniżej której zakładki zmienią się automatycznie w akordeon

Do strony dołącz biblioteki: jQuery, Bootstrap oraz accordion.js według przygotowanego przeze mnie wzoru:

Przetestuj działanie na tablecie lub telefonie lub zmniejsz okno przeglądarki poniżej zadanej wartości screen. Oczywiście wartość tą możesz zmieniać według uznania.

Pobierz pliki ›