Elementor toggle widget - Lapozás funkció

Áttekintés

Az Elementor Toggle widget egy könnyen használható elem, aminek a segítségével, például GYIK, azaz gyakran ismételt kérdések szekciót készíthetünk. Előfordulhat, hogy annyira sok elemet kellene készíteni, ami már túl sok, így inkább felosztanánk oldalakra és lapozhatóvá tennénk. Ezzel segítve a látogatókat, hogy könnyedén megkapják a felmerülő kérdésre a választ.

Sajnos a beépített Elementor widget nem rendelkezik ilyen funkcióval, sőt a legtöbb olyan kiegészítő, ami tartalmaz Toggle widgetet, szintén nem kezeli. Az alábbi kódban, egy saját lapozó és navigációs rendszert készítünk, aminek a segítségével, meghatározhatjuk, hogy egy oldalon hány lenyíló elem jelenhet meg. Nem kell aggódnod, ha sokat jelenítesz meg egyszerre, ugyanis a kód automatikusan az első elem tetejére görgeti vissza a felhasználót.

https://peldaweboldal.hu

Előkészületek

Kezdjük az első fázissal. Készítsd be a toggle widgeted és legalább annyi elemet hozz létre benne, ami több lesz, mint amit az első oldalon szeretnél megjeleníteni. Értelemszerűen erre azért van szükség, hogy egyből tesztelni tudjuk a működést. A példa kódban 9-re van állítva, ezt csak módosítanod kell arra, amennyit te szeretnél egy oldalon megjeleníteni.

A toggle widgetnek mindenképpen meg kell adnod egy saját class-t, ezt azonosításra fogjuk használni. A saját class-t a szokásos módon a toggle widget haladó fülön tudod megadni az elrendezés fül legalsó mezőjében a CSS Osztály-nál. Itt írd be az alábbi értéket: mytoggle

Az előkészület utolsó lépése, hogy egy HTML widgetet a toggle alá beraksz.

A kód használata

Az alábbi kódot teljes terjedelmében másold ki és illeszd be a HTML widgetbe. Ha mindent jól csináltál és több mint 9 toggle elemed van létrehozva, a további elemeket oldalakba sorrendezi be.

Elementor szerkesztő

Előfordul, hogy egyes scriptek a szerkesztőfelületen elsőre, vagy közvetlen a widget módosítás hatására nem működik. Ilyenkor mindig ellenőrizzük le az oldalon is, vagy frissítsük a szerkesztőfelületet.

<div class="my--pagination">
    <div class="my--page-links"></div>
    <div class="my--pagination-arrows">
        <div class="my--pagination-arrow my--left-arrow"><i class="fas fa-chevron-left"></i></div>
        <div class="my--pagination-arrow my--right-arrow"><i class="fas fa-chevron-right"></i></div>
    </div>
</div>

<style>
    .my--pagination {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Ikon pozició hotfix a toggle címsorhoz */
.mytoggle .elementor-tab-title {
    align-items: center;
    display: flex;
}

.my--page-links {
    display: flex;
    justify-content: center;
    align-items: center;
}

.my--page-link {
    color: #858A8E;
    cursor: pointer;
    border-bottom: 1px solid transparent;
    margin-right: 5px; /* Távolság az egyes lapozó elemek között */
    margin-left: 5px;
     transition: all .3s ease;
}

.my--page-link:hover {
    color: #E60000;

}

.my--page-link.active {
    color: #E60000;
    border-bottom: 1px solid #E60000;
}

.my--pagination-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #BEBEBE;
    border: 0px solid #E5E5E5;
    width: 36px;
    height: 36px;
    cursor: pointer;
    border-radius: 50%
}

.my--pagination-arrow:hover {
    background-color: #E60000;

}

.my--left-arrow {
    margin-right: 10px;
    margin-left: 10px;
}

.my--right-arrow {
    margin-left: 10px;
    margin-right: 10px;
}

.my--pagination-arrow i {
    color: white;
    font-size: 16px;
}

.my--pagination-arrow:hover i {
    color: white;
}

.my--pagination-arrow.disabled {
  opacity: 0.5; /* például átlátszóság csökkentése */
  pointer-events: none; /* nopointer */

}

@media only screen and (max-width: 767px) {
    .my--pagination {
        flex-direction: column;
    }
    .my--page-links {
        margin-bottom: 10px;
    }
    .my--pagination-arrow {
        margin-top: 0px;
    }
}

</style>

<script>

jQuery(document).ready(function($) {
  if (!$('.mytoggle').length) {
    // Ha nincs '.mytoggle' osztályú elem a DOM-ban, akkor nem fut tovább a script
    return;
  }

  var numItems = $('.mytoggle .elementor-toggle-item').length;
  var numPages = Math.ceil(numItems / 9);
  var pageLinks = '';
  for (var i = 1; i <= numPages; i++) {
    pageLinks += '<span class="my--page-link" data-page="' + i + '">' + i + '</span>';
  }
  $('.my--page-links').html(pageLinks);
  $('.my--page-link:first-child').addClass('active');
  $('.mytoggle .elementor-toggle-item').hide().slice(0, 9).show();

  // Az oldalak közötti navigáció nyilainak beszúrása
  $('.my--left-arrow').insertBefore($('.my--page-link:first-child'));
  $('.my--right-arrow').insertAfter($('.my--page-link:last-child'));

  // Kezdő beállítások
  $('.my--left-arrow').addClass('disabled');
  if (numPages === 1) {
    $('.my--right-arrow').addClass('disabled');
  }

  // Az oldalak közötti navigáció nyilainak triggere
  $('.my--left-arrow').click(function() {
    var currentPage = parseInt($('.my--page-link.active').data('page'));
    if (currentPage > 1) {
      $('.mytoggle .elementor-toggle-item').hide().slice((currentPage - 2) * 9, (currentPage - 1) * 9).show();
      $('.my--page-link').removeClass('active');
      $('.my--page-link[data-page="' + (currentPage - 1) + '"]').addClass('active');
      $('html, body').animate({
        scrollTop: $('.mytoggle .elementor-toggle-item').first().offset().top // Scroll az első toggle elemhez
      }, 500);
      $('.my--right-arrow').removeClass('disabled');
    }
    if (currentPage - 1 === 1) {
      $('.my--left-arrow').addClass('disabled');
    }
  });

  $('.my--right-arrow').click(function() {
    var currentPage = parseInt($('.my--page-link.active').data('page'));
    if (currentPage < numPages) {
      $('.mytoggle .elementor-toggle-item').hide().slice(currentPage * 9, (currentPage + 1) * 9).show();
      $('.my--page-link').removeClass('active');
      $('.my--page-link[data-page="' + (currentPage + 1) + '"]').addClass('active');
      $('html, body').animate({
        scrollTop: $('.mytoggle .elementor-toggle-item').first().offset().top // Scroll az első toggle elemhez
      }, 500);
      $('.my--left-arrow').removeClass('disabled');
    }
    if (currentPage + 1 === numPages) {
      $('.my--right-arrow').addClass('disabled');
    }
  });

 $('.my--page-link').click(function() {
var pageNum = $(this).data('page');
$('.mytoggle .elementor-toggle-item').hide().slice((pageNum - 1) * 9, pageNum * 9).show();
$('.my--page-link').removeClass('active');
$(this).addClass('active');
$('html, body').animate({
  scrollTop: $('.mytoggle .elementor-toggle-item').first().offset().top // Scroll az első toggle elemhez
}, 500);

// Bal és jobb nyíl állapota az oldalak közötti navigáció kattintás után
if (pageNum === 1) {
  $('.my--left-arrow').addClass('disabled');
  $('.my--right-arrow').removeClass('disabled');
} else if (pageNum === numPages) {
  $('.my--left-arrow').removeClass('disabled');
  $('.my--right-arrow').addClass('disabled');
} else {
  $('.my--left-arrow, .my--right-arrow').removeClass('disabled');
}
});
});
</script>

Elemek számának módosítása oldalanként

Ez a példa oldalanként 9 toggle elemet jelenít meg egyszerre. Ha ezt szeretnéd átírni, akkor mindenhol, ahol 9-es számot látsz, írd át arra, amire szeretnéd. Ezeket a sorokat kiemeltük a megjelenítésben.

A kód működése

Ha mindent jól csináltál és több mint 9 toggle elemet állítottál be, akkor láthatod, hogy a lapozóban több szám is megjelent és a további toggle elemek rejtve vannak, amíg nem navigálunk át a következő oldalra.

Most tekintsük át a működést.

A Kódot három részre lehet bontani. HTML, CSS és JS (pontosabban jQuery). Emeljünk ki belőle pár érdekesebb kódrészletet.

HTML

A HTML részben készítjük el a lapozó és navigációs elemeinket. Mivel egy kicsit speciálisabb elrendezésre volt szükségünk, a JS kód segítségével állítottuk be a navigációs nyilakat úgy, hogy a bal oldali, a lapozó előtt, míg a jobb oldali a lapozó után, de ugyanúgy közvetlenül mellette legyen.

 $('.my--left-arrow').insertBefore($('.my--page-link:first-child'));
  $('.my--right-arrow').insertAfter($('.my--page-link:last-child'));

Természetesen a HTML-ben csak a vázat készítjük el, ugyanis az ilyen típusú megoldásoknál nem határozhatjuk meg manuálisan a lapszámolást, helyette ezt a jQuery segítségével fogjuk megvalósítani, így biztosítva azt, hogy könnyen kiegészíthető legyen anélkül, hogy manuálisan bele kellene nyúlni a kódba.

A számok generálása az alábbi kódrészletben történik:

var numItems = $('.mytoggle .elementor-toggle-item').length;
var numPages = Math.ceil(numItems / 9);
var pageLinks = '';
for (var i = 1; i <= numPages; i++) {
  pageLinks += '<span class="my--page-link" data-page="' + i + '">' + i + '</span>';
}
$('.my--page-links').html(pageLinks);

Az Elementor toggle widget minden egyes toggle elemének van egy .elementor-toggle-item osztálya. A script ezeket számolja, majd a numPages változóba menti el, mennyi oldalra lesz szükségünk. A pageLinks változóba generálunk HTML kódot a lapozási számokból, majd ezt a HTML kódot a .my–page-links elembe helyezzük el a .html() metódus segítségével. Ezért nincs szükségünk arra, hogy a HTML-be manuálisan készítsünk lapozót.

jQuery

Maga a jQuery felelős az egész rendszer működéséért, és ahogy fentebb is olvashattad, a HTML-t is módosítjuk vele. A kód legelején található: jQuery(document).ready(function($) { biztosítja, hogy a script csak azután fut le, hogy a DOM-ban minden elem elérhető.

Közvetlenül utána máris egy if feltétel látható, amelyet arra használunk, hogy ha az adott oldalon a DOM-ban nem található meg a .mytoggle class, akkor a kód nem fut tovább feleslegesen. Egyfelől ezért volt fontos, hogy az elején megadtuk ezt a class-t a toggle widgetnek, továbbá, hogy behatároljuk, a script mely widgetre legyen érvényes. Ha ezt a lépést kihagyjuk, akkor olyan toggle widgetre is lefut és érvényesíti a scriptet, amire egyébként nem szeretnénk.

Amit még érdemes kiemelnünk, az a ** $(‘.mytoggle .elementor-toggle-item’).hide().slice(0, 9).show();** rész. Lényegében az itt meghatározott érték alapján a .hide először elrejti az elemeket, majd a .slice kiválasztja a listából az első 9 elemet és a .show parancssal megjeleníti azt.

Indexelés

A JavaScript, valamint jQuery egyaránt 0-tól indexeli a tömböket és elemeket, ezért az első elem mindig 0, a második elem indexe 1 stb.

A script továbbá tartalmaz egy kiegészítést is:

$('html, body').animate({
       scrollTop: $('.mytoggle .elementor-toggle-item').first().offset().top // Scroll az első toggle elemhez
     }, 500);

Ennek segítségével, amikor lapozunk és szükséges, a látogatót visszagörgeti a toggle-item első elemére. Ez főként akkor hasznos, ha sok elemet jelenítünk meg oldalanként.

A kód továbbá tartalmaz két extra class-t. Az egyik az „active”, amit az aktuális oldalszámra ráteszünk, a másik a disabled, amit a nyilak kapnak meg, ha nincs több oldal. Ezek azért hasznosak, mert így a CSS-be könnyedén készíthetünk eltérő megjelenést és kiemelhetjük például az aktuális oldal számának színét a többitől.

Amikor az oldal betöltődik, alapesetben az első oldalon állunk. Ezért mindenképpen szükség van arra, hogy a lapozónk első száma rendelkezzen az active class-szal. $(‘.my–page-link:first-child’).addClass(‘active’);

CSS

Ahhoz, hogy legyen valamiféle kinézete az egész lapozónak, CSS-re van szükségünk. Egyszerű kinézetet készítettünk, amit könnyedén átírhatsz, hogy igazodjon a saját oldalad stílusához.

A .my–page-link lesz az, ami a lapszámokra érvényes, tehát, ha szeretnéd megváltoztatni a számok színét, háttérét stb, azt úgy tudod megtenni, hogy erre a class-ra hivatkozol.

Ha az aktív állapotú szám kinézetét szeretnéd módosítani, akkor a .my–page-link.active-ra kell hivatkoznod, amit a példában is láthatsz. A .my–pagination-arrow a navigációs nyilak konténer osztálya. Ha maga az ikont szeretnéd módosítani (például másik szín), akkor a .my–pagination-arrow i kell használnod.

Ha a kikapcsolt állapotot akarod módosítani, akkor a .my–pagination-arrow.disabled kell alkalmazni. Ezen kívül mindkét navigációs nyilat külön class-szal jelöltük. Ha közvetlenül az ikont szeretnéd módosítani, akkor az elején található HTML-ben kell átírni a FontAwesome-t arra, amire neked van szükséged.

<div class="my--pagination-arrow my--left-arrow"><i class="fas fa-chevron-left"></i></div>
        <div class="my--pagination-arrow my--right-arrow"><i class="fas fa-chevron-right"></i></div>