Możesz dodać funkcję rozwijania i składania wybranej sekcji do przycisku/tekstu/ikony poprzez dodanie kodu JavaScript do swojego landing page'a.

Dodanie kodu js rozwijanej sekcji

1. Aby dodać kod JavaScript do swojej strony, należy przejść do ustawień strony po zalogowaniu się do naszej aplikacji. W aplikacji Landingi, 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 -> dodaj kod.

🔥 Treść kodu, który trzeba dodać do strony: 🔥

<script>
    $('#ID SEKCJI').hide();
  $('#ID PRZYCISKU/TEKSTU/IKONY').click(function(){
    $('#ID SEKCJI').slideToggle();
    setTimeout(function(){
      $('#ID PRZYCISKU/TEKSTU/IKONY').toggleClass('toggleCSS');
    }, 250);
  });
</script>

💡 DODATEK 💡

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

.toggleCSS{
transform: rotate(180deg);
}

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

Edycja kodu js rozwijanej sekcji

  1. Gdy już mamy dodany powyższy kod Javascript, należy go odpowiednio dostosować. Do skryptu należy dodać ID SEKCJI oraz ID IKONY/TEKSTU zgodnie z danym Landing Page'm.

Kody te można znaleść w edytorze. Kliknij na IKONĘ/TEKST, który ma być odpowiedzialny za rozwinięcie sekcji, skopiuj jego ID i podmień go w dodanym wcześniej kodzie JavaScript.

2. Analogicznie w przypadku sekcji – kliknij na SEKCJĘ, która powinna być otwierana, skopiuj jej ID i podmień w dodanym wcześniej kodzie JavaScript.

Jeśli zmiany zostały zapisane i wszystko zostało dodane prawidłowo, finalny efekt powinien wyglądać tak:

Więcej informacji na temat kodów JavaScript znajdziesz tutaj.

Jeśli napotkasz problemy – napisz do nas na chacie 😉

Did this answer your question?