Rozwijana sekcja

Ostatnia aktualizacja: 04.10.2019

Sekcje nie muszą być statyczne – za pomocą dodatkowego JavaScriptu i nadania klas kilku elementom, możesz stworzyć rozwijane sekcje na swoim landingu.

I. Dodanie kodu JavaScript do landing page’a

1.  Zaloguj się do aplikacji. W menu po lewej wejdź w zakładkę Landingi > następnie wybierz landing z listy i kliknij Dashboard.

2. W poziomu Dashboarda przejdź do zakładki Kody javascript i kliknij Dodaj kod.

UNS1_PL

3. Wklej poniższy kod w nowym oknie na stronie głównej landinga 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 landingu 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;
}
UNS2_PL

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).

II. Dodanie klas do elementów w edytorze

1. Wejdź do edycji wybranego landinga i stwórz sekcję, która docelowo ma się rozwijać. Kliknij na nią i nadaj jej klasę slideSection.

UNS3_PL

2. Kliknij na element, który ma być odpowiedzialny za rozwinięcie sekcji (np. ikonę, przycisk lub tekst) i nadaj mu klasę slideTrigger.

UNS4_PL

3. Opublikuj ponownie landinga.

Czy ten artykuł był dla Ciebie pomocny?

Nadal potrzebujesz pomocy?

Skontaktuj się z naszym supportem. Chętnie pomożemy.
Wyślij nam wiadomość
Ta strona używa plików cookies w celach analitycznych. Polityka prywatności.