• Blog
  • Darmowe konsultacje
  • O mnie
  • Kontakt
Wyklikane.pl
  • Blog
  • Darmowe konsultacje
  • O mnie
  • Kontakt

Elementor

  • Strona główna
  • Elementor
  • Elementor: domyślnie zamknięty akordeon

Elementor: domyślnie zamknięty akordeon

  • Opublikowane przez Damian Kmieciak
  • Data 19 kwietnia 2021
  • Komentarze 6 komentarzy
Zamknięty akordeon

Witaj! Jeśli zdarzyło Ci się kiedyś tworzyć stronę internetową za pomocą Elementora to jest spora szansa, że natknąłeś się na widżet “Akordeon”. Przydaje się szczególnie do sekcji z pytaniami i odpowiedziami na stronie. Elementor domyślnie ustawia pierwszą kartę widżetu jako otwartą. Za chwilę, pokażę Ci jak nakłonić go, aby po wejściu na stronę, pokazał się domyślnie zamknięty akordeon.

Istota problemu

Ze względu na fakt, że domyślne zachowanie kart akordeonu nie każdemu może przypaść do gustu, postanowiłem, poszukać rozwiązania. Przydaje się ono szczególnie, gdy posiadasz akordeon podzielony na kilka sekcji z nagłówkiem. Zobacz obrazek poniżej:

 

Domyślny widok akordeonu Ponieważ, chcesz podzielić go na sekcje, nie ma innej opcji niż zduplikować widżet i wstawić nagłówki. Niestety pierwsza karta w każdym z nich jest automatycznie rozwinięta.

Zamknięty akordeon

Możemy jednak temu zapobiec i stworzyć taki widok:

Domyślnie zamknięty akordeon

 

Jak to zrobić? Zapytasz. Już pokazuję:

1) Przejdź do strony z widżetem Akordeon i dodaj na dole strony nowy blok HTML (nie  Własny HTML, tylko ten zwykły HTML pokazany poniżej po lewej).

Elementor blok HTML

2) W treści pola tekstowego wklej poniższy fragment kodu:

<script> 
jQuery(document).ready(function($) { 
var delay = 100; setTimeout(function() { 
$('.elementor-tab-title').removeClass('elementor-active');
 $('.elementor-tab-content').css('display', 'none'); }, delay); 
});
</script>

Elementor blok HTML

3) A następnie zapisz zmiany na stronie.

Elementor zapis strony

4) To wszystko! Wszystkie karty akordeonu będą teraz automatycznie zamknięte 🙂

EDIT: Jeśli powyższy kod działa jedynie gdy jesteś zalogowany do zaplecza, a po wylogowaniu lub w trybie prywatnym przeglądarki już nie działa, to oznacza, że Twój motyw ani żadna wtyczka nie korzysta z jQuery.

W takiej sytuacji musisz samodzielnie dodać wspomnianą bibliotekę do strony. Po prostu doklej wcześniej poniższy kod:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
Użyj pierwszego skryptu jeśli drugi nie działa samodzielnie.

Co tu się wyprawia?

Powyższy skrypt szuka na stronie otwartych kart akordeonu i usuwam im klasę CSS ‘elementor-active’, która jest odpowiedzialna za ich otwieranie. Ponieważ skrypt wykonuje się natychmiastowo, gdy tylko załaduje się niezbędny kod strony, cała akcja jest niemal niezauważalna dla użytkownika.

Podsumowanie

Mam nadzieję, że powyższy trick Ci się przyda i znajdziesz dla niego zastosowanie. Na zakończenie dodam, że jeśli masz jakieś pytania lub przemyślenia, to koniecznie zostaw mi je w komentarzu.

Możesz też zainteresować się wpisem o tym, jak stworzyć automatycznie rozwijane pole formularza kontaktowego.

PS. Pamiętaj zajrzeć czasem na moją stronę Facebook, gdzie zamieszczam aktualności i ciekawostki ze świata WordPress. Będziesz też być może zainteresowany filmami na kanale YouTube.

Wersja wideo

ZAPISZ SIĘ DO NEWSLETTERA!

Bądź na bieżąco! W newsletterze będziesz otrzymywać m.in. informacje o nowych wpisach na blogu, poradnikach na YouTube, e-bookach oraz ważnych wydarzeniach ze świata WordPress. Wysyłam jedynie wartościowe treści.

Tag:Elementor Pro

  • Udostępnij:
author avatar
Damian Kmieciak

Programista, twórca gier i aplikacji na urządzenia mobilne oraz komputery PC. Projektant stron i sklepów internetowych, logotypów, wizytówek, opakowań, ulotek i etykiet. Ostatnio pracownik FIBARO odpowiedzialny za utrzymanie i rozwój strony internetowej.

Poprzedni wpis

Elementor: automatycznie rozwijany formularz kontaktowy
19 kwietnia 2021

Następny wpis

Jak wyłączyć komentarze (krok po kroku)
3 maja 2021

Może Ci się spodobać

Sierotki w WordPress
Sierotki w WordPress. Wiszące spójniki i przyimki
5 grudnia, 2022
przełącznik języka na ekranie logowania
Jak wyłączyć przełącznik języka na ekranie logowania
7 listopada, 2022
Jak przyspieszyć Elementor
Jak przyspieszyć Elementor
24 października, 2022

Znajdź na stronie

Kategorie

  • Darmowe motywy
  • Design / Grafika
  • Elementor
  • SEO / Optymalizacja
  • Serwer / IT
  • WooCommerce
  • WordPress

Najnowsze wpisy

Jak wymusić 9 cyfr numeru telefonu w WooCommerce
Jak wymusić 9 cyfr numeru telefonu w WooCommerce
30st.2023
Jak zmienić nazwę sklepu WooCommerce
Jak zmienić nazwę sklepu WooCommerce
16st.2023
Jak wyświetlić polecane produkty
Jak wyświetlić polecane produkty w WooCommerce
02st.2023
Jak zbudować sklep internetowy
Jak zbudować sklep internetowy w WordPress
19gr.2022
Sierotki w WordPress
Sierotki w WordPress. Wiszące spójniki i przyimki
05gr.2022
Wyklikane Logo
+48 503 865 645
kontakt@wyklikane.pl