Zakładki w stylu Akordeon (ang. Accordion Tabs) to sposób prezentacji gdzie poprzez kliknięcie tytułu danej zakładki, pokazywana jest jej treść, natomiast treść dotychczas aktywnej jest chowana. Zasada działania Accordion pokazana jest w przykładzie poniżej. Accordion tworzony jest poprzez umieszczenie w treści Strony odpowiedniego kodu (ang. shortcode). Jeśli Administrator jest obeznany z budową akordeonu, może go napisać ręcznie. Jeśli zaś nie używał go do tej pory, może wykorzystać gotowy szablon dostępny w edytorze wizualnym TinyMCE poprzez ikonkę Szablonu lub w menu górnym Wstaw >> Wstaw Szablon >> Accordion. Po wczytaniu szablonu w danym miejscu strony należy w razie potrzeby powielić każdą zakładkę na która składa się [head] [/head][content] [/content]. Po każdej zakładce z wyjątkiem ostatniej wstawić (napisać) należy rozdzielenie zakładek w postaci [break]
Accordion można utworzyć na 3 sposoby w zależności od stopnia zaawansowania obsługi CMS przez Administratora.
1. Generator
Po pierwsze za pomocą generatora przyjaznych kodów (ang. shortcodes) dostępnego w pasku narzędzi Edytora Wizualnego pod przyciskiem [Elementy] >> [Wstaw Element] >> [Krótkie Kody] >> Zakładki Accordion. po wybraniu tej opcji zostanie załadowany moduł do generowania struktury Akordeonu w oparciu o wypełnione przez Administratora pola formularza. Przed przystąpieniem do tworzenia zakładek należy przemyśleć ich ilość oraz kolejność gdyż późniejsza edycja będzie wymagała już ręcznej ingerencji w strukturę lub źródło HTML.
Aby utworzyć zakładki należy wybrać przycisk [Dodaj Zakładkę] a następnie uzupełnić zarówno klikalny tytuł jak i zawartość. Po uzupełnieniu pierwszej karty, należy powtarzać czynność aż cały Akordeon zostanie zbudowany. Po ukończeniu należy skorzystaj z przycisku [Wstaw Kod], który umieści całą utworzoną strukturę w miejscu kursora w treści Strony. Jeśli kursor nie został ustawiony ręcznie zakładki zostaną umieszczone na samym początku strony.
Po umieszczeniu Akordeonu w treści okna Edytora można dostosować wygląd treści pomiędzy tagami [content] i [/content] przy użyciu dostępnych funkcji Edytora Wizualnego.
2. Szablony
Drugim sposobem na umieszczenie Accordionu w treści Strony lub Modułu jest wybranie go spośród szablonów dostępnym w edytorze wizualnym - od MP CMS w wersji 4.50.
- Wybrać poprzez kliknięcie miejsce w treści gdzie ma być umieszczony Akordeon,
- Upewnić się że akordeon nie będzie umieszczony w akapicie (blok "p"),
- Kliknąć ikonkę Wstaw Szablon lub wybrać ją z górnego menu Wstaw >> Wstaw Szablon,
- Wybrać Accordion a następnie zaakceptować wybór przyciskiem OK,
- W wybranym miejscu strony zostanie umieszczony przykładowy szablon w stylu:
[accordion*]
[head] Tu wpisz klikalny tytuł [/head]
[content] Tu wpisz treść zakładki [/content]
[break]
[head] Tu wpisz klikalny tytuł [/head]
[content] Tu wpisz treść zakładki [/content]
[break]
[head]Tu wpisz klikalny tytuł [/head]
[content] Tu wpisz treść zakładki [/content]
[/accordion]
* bez gwiazdki - Jeśli Accordion ma mieć więcej niż 3 zakładki proszę ręcznie powielić zawartość od [head] do [break] włącznie
- Za ostatnim kodem zamykającym [/content] nie należy wstawiać [break],
- Uzupełnić zawartość pomiędzy tagami [head] i [/head] oraz [content] i [/content]
3. Tworzenie ręcznie
Kolejność tworzenia ręcznie Accordionu wygląda następująco:
- Wybrać miejsce w treści gdzie chcemy umieścić Akordeon,
- Upewnić się że akordeon nie będzie umieszczony w akapicie (blok "p"),
- Rozpocząć tworzenie akordeonu od napisania kodu [accordion*] - bez gwiazdki wewnątrz nawiasów [ i ],
- Utworzyć klikalny nagłówek otwierający zakładkę wewnątrz kodu [head] tu tytuł [/head],
- Uzupełnić treść zakładki wewnątrz kodu [content] treść [/content] (ang content = zawartość),
- Wstawić rozdzielenie pomiędzy zakładkami w postaci [break],
- Powtórzyć całą czynność tyle razy ile ma być zakładek,
- Za ostatnim kodem zamykającym nie należy wstawiać [break],
- Zamknąć Akordeon kodem [/accordion],
- Wszystkie elementy konstrukcyjne (wytłuszczone powyżej) należy pisać z małych liter.
Schemat
[accordion*]
rozpoczęcie Akordeonu (musi być bez *)
[head] [/head]
pierwszy tytuł
[content] [/content]
treść pierwszej zakładki
[break]
odstęp
[head] [/head]
drugi tytuł
[content] [/content]
treść drugiej zakładki
[break]
odstęp
(....)
powielenie schematu dowolną ilość razy
[head] [/head]
ostatni tytuł
[content] [/content]
treść ostatniej zakładki
[/accordion]
zakończenie Akordeonu już nie poprzedzone [break]
Żeby zobrazować jak wyglądać ma schemat struktury w użyciu, zrobiliśmy zrzut edytora wizualnego, prezentujący budowę Accordionu dla poniższego działającego przykładu.
Tagi składające się na strukturę Accordionu zostały wyróżnione na zielono.
Działający Przykład
Rozwinięcie tekstu
Praesent nec tempus metus, at scelerisque nisi. Donec dapibus blandit eleifend. Nulla in lectus ac lectus aliquet fringilla. Vestibulum rutrum nec orci a mattis. Phasellus rutrum dui at neque consequat eleifend. Etiam malesuada, nisi eu aliquet faucibus, lacus ante tempor dolor, id pretium nulla ipsum in lacus. Ut quis velit malesuada, volutpat purus a, efficitur nisl.
Inne rozwinięcie tekstu
Mauris congue elementum tortor nec tristique. Suspendisse potenti. Vivamus ultricies efficitur enim, non vulputate sem iaculis sit amet. Vestibulum vitae consequatnisl. Aenean nibh dolor, iaculis quis interdum quis, ultricies id ipsum. Quisque elit sem, consectetur nec consequat et, pulvinar eu diam. Sed justo nisl, vulputate non risus sed, sollicitudin lobortis nisl. Curabitur ante ante, feugiat nec quam et, mollis scelerisque neque. Cras et enim nec enim malesuada ullamcorper.