Megjegyzés:
- Ha nem írunk CSS, azaz stílus meghatározást a mozgó objektumhoz, akkor az meg sem jelenik
- Ha a CSS fájlban top meghatározást alkalmazunk, akkor a js fájlban is top legyen.
- Ha a CSS fájlban margin-top meghatározást alkalmazunk, akkor a js fájlban marginTop legyen
- Ismétlődést, vezérlő utasítást, ne a js programunk végén, hanem közvetlen az if utasításban helyezzük el.
- Az else utasítás, elhagyható
- JavaScript fájlt meghívó utasítási sort, a dokumentumunk végén helyezzük el

Pozíciók megadását legtöbbször, "px" méretben határozzuk meg.
Amikor JavaSript meghatározza pozíció értékét, akkor az értékhez hozzá kell rendelni a 'px' karaktereket.
Példa: 
var a=15; 
objekt.style.width=a+'px';

---

A mozgási irányt, vezérelhetjük button gombokkal, vagy hivatkozásokkal (horgony a)
A példánkban mindkettő szerepel, de a valóságban lehetőleg csak az egyik variációt alkalmazzuk

A választó gombok elé, írhatunk kérdéseket, melyekre a választ megkaphatjuk, ha a felfedésre kattintunk, vagy tartalomjegyzék szövegsorait, ha az adott témakörről többet szeretnénk megtudni, kattintsunk a felfedésre.

Bemutatóban a vezérlés: button gombbal,és hivatkozással is tesztelhető

Szöveget tartalmazó div szakasz magassága, offsetHeight =

Vezérlő gombok és hivatkozások!

Felfed ___________________________ Elrejt

Felfed _____________ | _____________ Elrejt

XHTML fájl

<p><strong>Vezérlő gombok és hivatkozások!</strong><br />
<button onClick="pozicioFelfed();">Felfed</button> _______________
<button onClick="pozicioElrejt();">Elrejt</button>
</p>

<a href="#.html" onClick="pozicioFelfed();">Felfed</a> ________ | ________
<a href="#.html" onClick="pozicioElrejt();">Elrejt</a>

<div id="efd2">

<div id="szovegd2">
<p>Ez egy bekezdés, ide tetszőleges szöveget írhatunk</p>
<p>Ez is egy bekezdés, ide is tetszőleges szöveget írhatunk. Szöveg megjelenéséhez, CSS, azaz stíluslapon megírt meghatározásokkal tetszőleges megjelenési formátumokat készíthetünk</p>
<p>Ez is egy bekezdés, ide is tetszőleges szöveget írhatunk <br />
sorlezáró utasítást <br /> vagy<br />
<span class="kek">szövegrészt kijelölő elemeket</span> is alkalmazhatunk, a megjelenítendő szöveg formázására</p>
<p><u>Ha szükséges, tetszőleges képet is beilleszthetünk</u></p>
<img src="kép elérési út.jpg" alt="Képleírás" width="50" height="50" border="0" />
</div>

</div>

<script language="JavaScript" type="text/javascript" src="mozgat.js"> </script>
</body>

CSS fájl

#efd2 { position: reletive; width: 700px; height:0px; overflow: hidden; margin-top: 10px; margin-left: 20px;}
#szovegd2 { padding:5px; background-color: #E3E3E3;}

JavaScript fájl, mozgat.js

var y=0;
var kinyit=0;
var bezar=0;

var celpont3 = document.getElementById("szovegd2");
szdm=(celpont3.offsetHeight); //szdm = szöveges-divszakasz-magassága
celpont3.style.display="none";

//A következő sorok nem kellenek, ezek jelen esetben, kiírják weboldalra, a div szakasz magassági értékét kiiras3 = document.getElementById ("d2hossz");
kiiras3.innerHTML += szdm;

function pozicioFelfed() {
EFD = document.getElementById ("efd2"); // EFD = Elrejtő-Felfedő-Divszakasz
EFD.style.display="block";
EFD.style.height=y+'px';
EFD.style.border="1px solid black";

if (kinyit<szdm){ kinyit++;
y++;
bezar=0;
window.setTimeout("pozicioFelfed(); " , 5) ;
}
if (kinyit>=2) {celpont3.style.display="block";} //Kezdeti felvillanás elkerülése végett, az érték 2, vagy nagyobb legyen
if(y>szdm+1) {y=(celpont3.offsetHeight); pozicioElrejt();}
}

function pozicioElrejt() {
if (y<1) elvanRejtve();
else {
EFD = document.getElementById ("efd2");
EFD.style.height=y+'px';
if (bezar<szdm){ bezar++;
y--;
kinyit=0;
window.setTimeout("pozicioElrejt(); " , 5) ;
}
if (bezar>=szdm-2) {celpont3.style.display="none"; celpont3.style.border="none"; EFD.style.border="none";}
if(y==0){celpont3.style.display="none"; EFD.style.border="none";} //Ha a felhasználó, nemvárt kattintásokat hajtana végre
}
}

//Megakadájozza a programfutási hibát, ha kezdetben a felfed helyett, az elrejt gombra kattintanának
//Elrejtésnél az y értéke = y--; A div szakasz magasságának értéke nem lehet minusz
function elvanRejtve() {y=0;}

Vissza a lap elejére