Kattintásra megjelenő és eltűnő blokk / tartalom elementorral

Hogyan legyen egy kattintásra megjelenő és eltűnő blokkod az elementor segítségségével?

1. lépés:

Illessz be egy HTML kód típusú blokkot az elementor oldaladba, a blokkba az alábbi kódot másold bele:
<button style=”background:#D4345B; color: #fff;” onclick=”myFunction()”>Kattints ide az űrlaphoz!</button>

Ennek a HTML kódblokknak a HALADÓ fülén a CSS classes sorba írd be: onclck

2. lépés

HTML típusú blokkba a gomb alá ezt a kódot beletenni:
myDIV opcionálisan átírható valami egyedire:

<script>
function myFunction() {
var x = document.getElementById(„myDIV”);
if (x.style.display === „block”) {
x.style.display = „none”;
} else {
x.style.display = „block”;
}
}
</script>

/* Ez a rész azért kell, hogy alapból ne jelenjen meg az űrlap. */
<style>
#myDIV {display: none;}
</style>

3. lépés

Az a blokk amit kattintásra meg akarok nyitni vagy el akarok rejteni, nálam ez az űrlaphoz tartozó blokk. Ott a HALADÓ fülön a CSS ID-be írd be myDIV szót (ez opcionális, cserélhető, de ha itt cseréled, akkor a 2. lépésben beillesztett kódban is cserélned kell), azaz a függvény ID-t.

A feladat eredményét itt láthatod: