Rozwijana sekcja

Sekcje nie muszą być statyczne – za pomocą dodatkowego JavaScriptu i nadania klas kilku elementom możesz stworzyć rozwijane sekcje na swoim landing page'u. Mogą one posłużyć np. do tworzenia rozwijanych pytań i odpowiedzi (FAQ).

Dodanie kodu JavaScript do landing page’a

1. Zaloguj się do platformy Landingi i przejdź do Dashboardu wybranego landing page'a.

2. Z poziomu Dashboardu przejdź do zakładki Kody JavaScript i kliknij Dodaj kod.

3. Wklej poniższy kod w polu Treść. Nazwij skrypt i wybierz pozycję Body – na dole na Stronie głównej. Kliknij Dodaj.

<script> 
  $('.slideSection').hide();
  $('.slideTrigger').click(function (event) {
    event.preventDefault();
    let target = $(event.target);
    target.closest('.widget-section').next('.slideSection').slideToggle();
    if (target.hasClass('widget-overlay')) {
      target.toggleClass('toggleCSS');
    } else {
      target.closest('.container').find('img').toggleClass('toggleCSS');
    }
  }) 
</script>

Opcjonalnie:

Jeśli chcesz, aby ikona obróciła się o 180 stopni, gdy sekcja jest otwarta, przejdź do własnych kodów CSS i dodaj następujący kod:

.toggleCSS {
	transition: 300ms linear all !important;
	transform: rotate(180deg) !important;
}

.slideTrigger {
	transition: 300ms linear all !important;
}

Aby dodać kod CSS, w toolbarze po prawej stronie przejdź do Ustawień strony i kliknij Dodaj własny CSS.

Podczas edycji do Ustawień strony wrócisz, klikając na strzałkę:

Po wprowadzeniu zmian Zapisz i zamknij, a następnie opublikuj landing page'a.

Kod CSS nie jest potrzebny, jeżeli używasz tekstu jako triggera (wyzwalacza) do rozwijania i składanie sekcji (jeśli go użyjesz, Twój tekst może być wyświetlany do góry nogami po rozwinięciu sekcji).

Dodanie klas do elementów w edytorze

1. Wejdź do edytora landing page'a i stwórz sekcję, która docelowo ma się rozwijać. Kliknij na nią i w toolbarze po prawej stronie zeskroluj do zakładki Inne. Wpisz slideSection w polu Klasy.

2. Powyżej dodaj drugą sekcję i umieść na niej element (np. ikonę, przycisk lub tekst), który ma być odpowiedzialny za rozwinięcie sekcji poniżej. Kliknij element i wpisz slideTrigger w polu Klasy.

WAŻNE:

W widgecie w ostatniej sekcji na Twoim landing page'u nie można ustawić rozwijania – nie rozwinie się. Jeżeli chcesz ustawić rozwijanie sekcji w ostatnim widgecie, to jest to możliwe: wystarczy, że dodasz po nim jeszcze jedną sekcję, a uruchomisz przedostatnią.

3. Opublikuj ponownie landing page'a.

Sprawdź, czy rozwijana sekcja działa prawidłowo.