kinyíló – becsukódó tartalmak egy oldalon belül


Néha jól jön, hogy egy lapon egyes tartalmakat alapértelmezetten el lehet rejteni a szemek elől (helyspórolás, átláthatóság stb..), persze nem véglegesen, csak átmenetileg. Kattintásra ki lehet nyitni ill. be lehet csukni pl. div-eket, p-ket stb.. Ehhez a kódot lásd lentebb.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>kinyíló - becsukódó tartalmak egy oldalon belül</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="description" content="leiras" />
	<meta name="keywords" content="kulcs, szavak" />
	<script type="text/javascript">
		function viewMore(div) {
			obj = document.getElementById(div);
			col = document.getElementById("x" + div);
 
			if (obj.style.display == "none") {
				obj.style.display = "block";
				col.innerHTML = "zárd be";
			} else {
				obj.style.display = "none";
				col.innerHTML = "nyisd ki";
			}
		}
	</script>
</head>
<body>
 
<a href="javascript:viewMore('two');" id="xtwo">nyisd ki</a> ...
<p>itt egy mintatartalom, ami mindig látszódik</p>
<p id="two" style="display:none">Ez csak akkor látszódik, ha kattintottál a "nyisd ki" linkre</p>
 
</body>
</html>
Kapcsolódó bejegyzések:
  • Valid XHTML transitional doctype, Valid XHTML transitional sablon Az alábbi kódot amolyan segítség leginkább magamnak, hogy ne kelljen mindig megírnom az alapok …

  • Ha olyasmi formázást szeretnél, melyek általában könyvekben lehet látni (tartalomjegyzék), akkor az alábbi kódot használd:tartalomjegyzék mintaol …

  • Ha különböző adatokat tartalmazó táblákat szeretnék kinyíló, bezáródó effekttel ellátni, használd az alábbi kódot (expand, collapse effect)tabl …

  • Honlapkészítés során van olyan helyzet, hogy szeretnénk betölteni a lapon 1-1 olyan új szöveget, képet miegymást, hogy az ne járjon az egész oldal újratöltésével …

  • Felmerült egy kérdésként, hogy lehetne egy login oldal tartalmánál (belépési név és jelszót kell megadni) jelezni a felhasználók számára azt, hogy melyik mező mi …

A cikket beküldte: Harder (http://blog.harder.hu)

30 hozzászólás

  1. mcryan says:

    És hol a leírás? :)

  2. Tupacko says:

    Hamarosan megoldodik a problema. Meg finomitassra szorul a sablon es a pluginek :) A forraskodbol most is kiszedheted a leirast, csak eppen nem latszik :)

  3. Harder says:

    javítottam a cikket. :)

  4. eyan says:

    köszönöm a szkriptet már naon sok ehlyen kerestem és ideág ez a legjobb magasan viszi apálmát az egyszerűsége és bővíthetősége miatt.

    ezek sztem amúgy feleslegesek bele: :)
    col.innerHTML = “zárd be”;
    col.innerHTML = “nyisd ki”;
    itt egy mintatartalom, ami mindig látszódik

    ajánlom mindenkinek amúgy én is ezt az alapot használom.
    üdv.: eyan

  5. mcryan says:

    Thx, jó lett!

  6. Bandai says:

    Van valami öltetek arra, hogy a “nyisd ki” eltűnjön, miután megnyitotta a “Ez csak akkor látszódik, ha kattintottál a “nyisd ki” linkre” szöveget? Próbálkoztam pár dologgal, de sehogysem jön össze.

  7. hajnalka says:

    Szia Harder!

    Köszi a kódot!
    Azt szeretném megkérdezni, hogy mit kéne változtatni benne, ha én ezt a lenyíló tartalmat két féle tartalommal szeretném megtölteni, és azt szeretném, hogy az oldalon ugyanazon a helyen is nyíljanak meg? (tehát mint egy felső sávban, ahol A meg B hivatkozás kattintására megjelenik azok tartalma)
    Már sikerült két hivatkozást készítenem, a módszereddel, de ha egymás után kattintok rájuk, akkor egymás alatt nyílik meg a kétféle tartalom, nem ugyanott.

    Ha van valami ötlet, megköszönném!
    :)

  8. ViZion says:

    Sziasztok Bandai és hajnalka!
    Remélem nem gond, ha válaszolok :)
    Készítsetek a head-ba functionokat, ahol felsoroljátok a div-eket, és a hozzá tartotzó display: none , vagy block tulajdonsággal. Természetesen a gombot, ami nyitja, azt is lehet div-be rakni (vagy elnevezni pl. a nyisd ki képet id=”nyit”), ezáltal ki is lehet kapcsolni ugyanúgy.
    Most dolgozom, ha kell még segítség akkor este tudok pár soros -hegesztgetni való- js-t írni, ami kapcsolgatja a diveket.

  9. hajnalka says:

    Szia ViZion!

    Hú, nagyon megköszönném azt a pár sor js-t, mert én sajnos nem vagyok benne olyan járatos!
    De a divek formázásával addig is próbálkozom!

    :)

  10. ViZion says:

    javítom, mert átírt ezt-azt…
    ehh, felét kitörölte, nah, nem mondok semmit, azt is halkan…
    hXXp://regionaplo.extra.hu/stay/javascript.txt

    itt van, megjegyzéssel, mindennel, remélem hasznát veszed.

    A fenti 2 bejegyzést töröld Harder kérlek, utáljuk a WPvel 1mást, ez már így marad :)

  11. hajnalka says:

    Köszi a segítséget, melegében ki is próbálom!
    :D

  12. Harder says:

    ViZion, töröltem.

    Mivel a későbbiekben lehet hogy törlöd vagy elveszik a txt tartalma, itt a tartalma:

    Nah, vagyok végre :)
    szóval a head részben kell egy ilyen script:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    
    <script type="text/javascript">
    function csuk()
    {
    	var ids = new Array('egy', 'ketto', 'harom');
    	for (var i=0; i<ids.length; i++) 
    	{
    	document.getElementById(ids[i]).style.display = "none";
    	}
    }
     
    function nyit(div)
    {
    	obj = document.getElementById(div);
    	if (obj.style.display == "block")
    	{
    	csuk()
    	}
    	else
    	{
    	csuk()
    	obj.style.display = "block";
    	}
    }
    </script>

    Tehát sorban:
    a csuk funkció a felsorolt id-vel rendelkezõ elemeket eltünteti. A nyit funkció megnézi, hogy az amire kattintottál nyitva van-e, ha nyitva van bezárja. Ha nincs nyitva, akkor bezárja a többi div-et, és az aktuálisat nyitja.
    A body részben:

    1
    2
    3
    4
    5
    
    <div id="menu">
    	<a href="javascript:nyit('egy');" rel="nofollow"></a>
    	<a href="javascript:nyit('ketto');" rel="nofollow"></a>
    	<a href="javascript:nyit('harom');" rel="nofollow"></a>
    </div>

    Ez tul. a menü, itt kattintgatsz. A következõk a megnyitandó div-ek:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    
    <div id="egy" style="display:none">
    	TARTALOM
    </div>
    <div id="ketto" style="display:none">
    	TARTALOM
    </div>
    <div id="harom" style="display:none">
    	TARTALOM
    </div>

    Kb. ennyi, biztosan van elegánsabb is, de -ha nincs örült sok tartalom- akkor ez is megteszi.

  13. ViZion says:

    ÓÓÓÓ!
    Ezernyi köszönet Harder Mester! Az Erő legyen Veled!
    Működik (IE7pro), de IE6 pl. mit kezdene vele, azt nem tudom…

  14. hajnalka says:

    Szia ViZion!

    Minden pont úgy működik, ahogy szerettem volna!
    Köszönöm!
    :D

  15. Dani says:

    Tiszteletem!

    A script nagyon jó, csak java ismeretek híján segítségem lenne egy olyan megoldásra, amikor nem div elmeket, hanem lista elemeket nyit meg és zár be.

    Előre is köszönöm!

  16. Lehel says:

    Sziasztok! Már egy éve én is ezt használom, mysql- ből lekért adatokat így jelenítek meg! Eddig szépen is működött minden böngészőben, de most a FF4 böngésző első betöltődéskor szépen jeleníti meg de ha a vissza nyilra kattintók akkor már a tartalmak össze vissza nyílnak meg, mármint az adott címhez lenyitáskor más tartalom jelenik meg mind ami kéne? Másnál is van ilyen?

  17. Zsú says:

    De jó, köszi! :) Azt hogy lehet megoldani, hogy ne az összes kép alá nyíljon meg a szöveg, hanem mindig a saját képe alá?
    Pl egy kérdés van a képen, a válasznak meg jó lenne alá megnyílnia…

    Köszi!

  18. Zsú says:

    Mindig akkor találom meg a választ, amikor feltettem a kérdést. Na sebaj, hátha másoknak is segít, hogy elég volt átrendezni a sorok sorrendjét. Nagyon köszi! :)

  19. kérdező says:

    Sziasztok! Ezzel meglehet azt is valósítani, hogy ha lenyílik a tartalom akkor egy div class-ból olvassa ki az adatokat?

  20. Skinny says:

    Sziasztok!

    Először is, köszönöm ezt a kis helpet, jól jött! Viszont, olyan problémám van, hogy ha megnyitom az adott oldalt, akkor amiket elakarok rejteni tartalom, az megjelenik. Ha rányomok a gombra, hogy több, akkor nem jelenik, és ha mégegyszer rákattintok, akkor újra megjelenik a teljes tartalom.
    Valami ötlet?

  21. koala says:

    Kedves Mindannyian,

    a segítségetek nagyon fontos lenne! De eltekintek az okok taglalásától :-)
    Tömören annyi lenne a kérdésem: a fenti program bővíthető-e, ha több mint 3 tartalmat szeretnék mutatni.
    Így próbáltam, de nem jött be: var ids = new Array(‘egy’, ‘ketto’, ‘harom’, ‘negy’, ‘ot’);
    Köszönöm előre is segítségeteket!!!!

  22. koala says:

    Sorry, a probléma úgy látszik megoldódott hosszas kín után :-)
    Tanulságul többeknek is leírom: ha a “new Array” listáját megnövelem (negy, ot, hat ….) akkor azok csak akkor fognak működésbe lépni, ha mindegyiket fel is töltöm tartalommal. Üdv, további szép napot!!!

  23. Harder says:

    Köszi hogy leírtad a megoldást is. :)

  24. koala says:

    Sziasztok,
    a fent említett helyes kis Javascript kóddal dolgozom – köszönet érte! – melyet sikeresen beépítettem a WordPressbe. Azt szeretném kérdezni, van-e valaki birtokában ugyanez kód határtalan mennyiségű tartalomra. A “new Array” már a tizennyolcadik-nál tart és még sok lesz…
    Köszönöm előre is!

  25. panda says:

    Nem tudom, hogy kapok e választ, de azért megpróbálom.
    Ugyan azt szerettem volna elérni, mint hajnalka, de akárhogy rakom össze nekem nem jelenít meg belőle semmit blogspoton. Valami ötlet?

  26. panda says:

    Oké megoldottam :D Esetleg az, hogy hogyan tudok a lenyíló tartalomba még egy lenyíló tartalmat? Próbálkoztam, de akkor nem csukja be az egyiket, egyszerre jeleníti meg őket.

  27. hernyó says:

    Panda, nekem is hasonló volt a problémám, hogy oldottad meg?

  28. Pman says:

    Sziasztok,

    Nekem egy olyan kérdésem lenne, hogy ezt hogyan építem be egy wordpress oldalba?
    Eléggé kezdő vagyok a wordPresshez, de sehogy sem tudom elérni, hogy működjön.

  29. Tupacko says:

    Probáltad már a Collapse-O-Matic kiegészítőt? :) Ha nem értesz a WordPress-hez és a programozáshoz, akkor sokat segíthet.

  30. Pman says:

    A Programozáshoz nagyjából azért értek, a PHP-val sincs gondom, de a JavaScript-re sosem állt rá az agyam :V De Köszönöm a tippet megnézem :)

Szólj hozzá
a kinyíló – becsukódó tartalmak egy oldalon belül c. bejegyzéshez

- Engedélyezett HTML elemek: <a> <em> <strong> <ul> <ol> <li>
- Forráskód beküldéséhez tedd a kódot ezek közé: <pre lang="php" line="1">Kódrészlet helye itt</pre>