Lenyíló és felzáródó funkció (Expand/collapse)

Ennek a funkciónak a használatát haladó felhasználók számára ajánljuk!

Az alábbi linkekre kattintva a lenyíló és felzáródó funkció működése könnyedén értelmezhető:

Első lenyíló link

Második lenyíló tartalom egy hosszabb címmel

Harmadik lenyíló tartalom

Az elkészítés módja:

Készítsünk egy új oldalt vagy bejegyzést, amelybe ezt a funkciót szeretnénk beilleszteni.

Egyszerű szöveggel nagyon könnyű dolgunk van. Kattintsunk a szerkesztő lécben található ikonra.

Egy felugró ablakot kapunk:

Írjuk be a lenyíló link szövegét, illesszük be a lenyíláskor olvasásra szánt szöveget a megfelelő helyre. Figyelem, a szövegünk csak html-ben formázható, így kép, táblázat is html-ből másolva illeszthető be (megoldás, ha nyitunk egy másik oldalt vagy bejegyzést, megszerkesztjük vizuális módban a lenyílási területre szánt szöveget, képet, táblázatot, majd kattintunk a HTML fülre és kimásoljuk a teljes kódot, úgy illesztjük be azt a felugró ablakba).

A tartalom utólagos formázása a lenyíló funkció elromlását okozhatja, különösen, ha a tartalom elejét vagy végét érintené a formázás. (Haladóknak: nagyon fontos, hogy a funkcióhoz tartozó div-ek közé essenek a formázó tag-ek.)

Kattintsunk az Insert Expand/Collapse Content gombra és mentsük el az oldalunkat.

Lenyíló linkenként kell ezt végigcsinálnunk.

Fontos! A linket magát, ha formázni szeretnénk (pl. félkövér betű) akkor HTML módban kell megtennünk az alábbi minta alapján az Első lenyíló link szöveget a strong html tag segítségével alakítjuk félkövérré. Fontos, hogy a formázó html nyitó- és zárótaget (legyen az félkövér: strong, dőlt: em, aláhúzás: u, stb.) mindig közvetlenül a szöveg elé és mögé tegyük.

<div class="exp-col-content-holder">
<a class="expand-content-link" 
href="#"><strong>Első lenyíló link</strong></a><br />
<div class="hidden-content"><br />
<p><strong><em>Ide bármilyen kép, szöveg, táblázat tehető...</em>
</strong></p><br /></div><br />
<div class="hidden-content"> </div><br />
</div>

Ide bármilyen kép, szöveg, táblázat tehető…