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Ó CIKKEKTÖBB A SZERZŐTŐL

30 HOZZÁSZÓLÁS

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

  4. 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

  6. 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. 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. 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. 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. 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 :)

  12. 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. ÓÓÓÓ!
    Ezernyi köszönet Harder Mester! Az Erő legyen Veled!
    Működik (IE7pro), de IE6 pl. mit kezdene vele, azt nem tudom…

  14. Szia ViZion!

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

  15. 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. 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. 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. 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. 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. 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. 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. 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!!!

  24. 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. 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. 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.

  28. 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. 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. 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 :)

HOZZÁSZÓLOK A CIKKHEZ

Kérjük, írja be véleményét!
írja be ide nevét