Rozwijana sekcja

30.01.2019

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

Jak stworzyć rozwijaną sekcję na landingu?

I. Dodanie kodu JavaScript do landing page’a

1. Zaloguj się do aplikacji i w menu po lewej stronie wejdź w zakładkę Landingi -> następnie wybierz landing z listy i kliknij w „Dashboard” -> przejdź do zakładki Kody javascript  i kliknij w przycisk „Dodaj kod”.

rozwijana_sekcja1

2. Wklej poniższy kod w nowootwartym oknie na stronie głównej landinga, w pozycji Body – na dole.

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

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;
}
rozwijana_sekcja2

Kod CSS nie jest potrzebny, jeżeli używasz tekstu jako wyzwalacza do rozwijania i składania sekcji (chyba, że chcesz, by Twój tekst był wyświetlony 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 sekcje, która docelowo będzie miała się rozwijać. Kliknij na nią i nadaj jej klasę „slideSection”.

rozwijana_sekcja3

2. Następnie kliknij na ikonę/przycisk/tekst, który ma być odpowiedzialny za rozwinięcie sekcji i nadaj mu klasę „slideTrigger”.

rozwijana_sekcja4

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.