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

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

WAŻNE: 💡
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 nadaje jej klasę "slideSection".

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

3. Opublikuj ponownie landinga. Jeśli wszystko zostało dodane prawidłowo, finalny efekt powinien wyglądać tak:

Did this answer your question?