Rozwijana sekcja

Zaktualizowano: 7 kwietnia, 2021 Autor: Avatar Teresa
share
Spis treści
share
Spis treści

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 nowym oknie na stronie głównej landing page'a w pozycji Body – na dole.

<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('i').toggleClass('toggleCSS');
    }
  }) 
</script>

WAŻNE:

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

Opcjonalnie:

Jeśli chcesz, aby ikona obróciła się o 180 stopni, gdy sekcja jest otwarta, w zakładce Własny CSS (prawa strona edytora) należy dodać następujący kod:

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

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

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 edycji wybranego landing page'a i stwórz sekcję, która docelowo ma się rozwijać. Kliknij na nią i nadaj jej klasę slideSection.

slidesection landingi

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 nadaj mu klasę slideTrigger.

slide ikona landing page

3. Opublikuj ponownie landing page'a.

share

Czy ta instrukcja była pomocna?