jQuery accordion

Szerző:   |   2012-09-21

Íme egy újabb, látványosabb megoldás, az előző bejegyzés mintájára.

A működő kódot ide kattintva tudod megnézni.

HTML forráskód


	<div id="wrapper">
		<h1>.: jQuery demo :.</h1>
		<h2>elso cimsor</h2>
		<div class="content">
			<img src="1.png" alt=""/>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vulputate, quam eu lobortis malesuada, tortor sapien molestie ante, vel pulvinar mi tortor a nunc. Aliquam sollicitudin tortor et eros mattis lacinia. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin malesuada erat at arcu dapibus cursus. Fusce urna mi, congue quis egestas sit amet, scelerisque at turpis. Suspendisse potenti. Sed consectetur quam eu risus sodales placerat. Sed lectus nisi, fermentum sed porttitor quis, tempus eget dui. Duis condimentum posuere consectetur. Fusce vel enim felis, vel posuere orci. In non nibh risus, sit amet ultrices lacus.</p>
		</div>

		<h2>masodik cimsor</h2>
		<div class="content">
			<img src="2.png" alt=""/>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vulputate, quam eu lobortis malesuada, tortor sapien molestie ante, vel pulvinar mi tortor a nunc. Aliquam sollicitudin tortor et eros mattis lacinia. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin malesuada erat at arcu dapibus cursus. Fusce urna mi, congue quis egestas sit amet, scelerisque at turpis. Suspendisse potenti. Sed consectetur quam eu risus sodales placerat. Sed lectus nisi, fermentum sed porttitor quis, tempus eget dui. Duis condimentum posuere consectetur. Fusce vel enim felis, vel posuere orci. In non nibh risus, sit amet ultrices lacus.</p>
		</div>

		<h2>harmadik cimsor</h2>
		<div class="content">
			<img src="3.png" alt=""/>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vulputate, quam eu lobortis malesuada, tortor sapien molestie ante, vel pulvinar mi tortor a nunc. Aliquam sollicitudin tortor et eros mattis lacinia. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin malesuada erat at arcu dapibus cursus. Fusce urna mi, congue quis egestas sit amet, scelerisque at turpis. Suspendisse potenti. Sed consectetur quam eu risus sodales placerat. Sed lectus nisi, fermentum sed porttitor quis, tempus eget dui. Duis condimentum posuere consectetur. Fusce vel enim felis, vel posuere orci. In non nibh risus, sit amet ultrices lacus.</p>
		</div>
	</div>

CSS forráskód


* {
	padding: 0;
	margin: 0;
	border: 0
}
body {
	background: #2f2333;
	margin: 20px;
	font-family: arial;
	font-size: 12px
}
div#wrapper {
	width: 400px;
	margin: 0 auto
}
div#wrapper h1 {
	font-size: 30px;
	margin: 50px 0 20px 0;
	text-align: center;
	color: #f5b431
}
div#wrapper h2 {
	background: url('arrow.png') no-repeat #c1cca0 right -45px;
	padding: 7px 10px;
	margin: 0 0 10px 0;
	font: bold 15px Arial, Helvetica, sans-serif;
	cursor: pointer;
	color: #737d56;
	border-radius: 10px
}
div#wrapper h2:hover {
	background-color: #737d56;
	color: #c1cca0
}
div#wrapper h2.active {
	background-position: right 5px
}
div#wrapper div.content {
	margin: 10px 0;
	border-radius: 10px;
	padding: 10px;
	display: none;
	background: #4e3e54;
	color: #beaec4
}
div#wrapper div.content p {
	line-height: 20px
}
div#wrapper div.content img {
	margin: 0 0 10px 0
}

jQuery forráskód


$(document).ready(function(){
	// az elso H2 tag-re rateszi az active class-t
	$("h2").eq(0).addClass("active");

	// megjeleniti az elso .content class-al ellatott DIV-et
	$(".content").eq(0).show();

	// kattintas valamelyik H2 tagen
	$("h2").click(function(){
		// megjeleniti a hozza tartozo DIV-et
		// valamint osszecsukja a megnyitottakat
		$(this).next(".content").slideToggle("slow").siblings(".content").slideUp("slow");
		// rateszi az active class-t
		$(this).toggleClass("active");
		// az osszes tobbi H2-rol leveszi az active class-t
		$(this).siblings("h2").removeClass("active");
	});
});

23 hozzászólás

  1. 2014. április 30. szerda - 09:00

    Szija egy olyan kérdésem lenne, hogy link-ek után gördüljenek le , azt meg lehet csinálni?… PL. Home
    és akkor ha rákattanok a home linkre, akkor gorduljon le a home div

    • 2014. május 28. szerda - 22:41

      Miért ne lehetne? Lecseréled a H2 tag-et A tagre és ennek megfelelően módosítod a JS-t.

  2. 2013. szeptember 23. hétfő - 19:06

    Sziasztok!

    Nekem e107 hez kellene,de sehogysem boldogulok,valaki tudna nekem segíteni???????
    tehát hogy mit hogy,és mit hová kell rakni???előre is köszönöm!

    • 2013. szeptember 29. vasárnap - 23:49

      Nem ismerem az e107 tartalomkezelőt, sosem használtam még.

  3. 2013. június 7. péntek - 22:41

    Nagyszerűen működik, csak a kis háromszög nem vált irányt. Mit tegyek?

    • 2014. július 9. szerda - 10:49

      Töltsd le a demo lapról az arrow.png nevű képet!

  4. 2013. február 18. hétfő - 13:00

    Szia Cyrex!
    Nekem nem akar legördűlni Chrome böngésző alatt. Mit csináljak? :/

    • 2013. február 18. hétfő - 17:02

      Itt a link, működik króm alatt: cyrex.hu/uploads/2012/09/jquery_menu2

    • 2013. június 18. kedd - 09:25

      Mert a html kódba nincs benne a jquery kód amit a code.jquery.com-ről kell betöltened 🙂

  5. 2012. december 21. péntek - 14:25

    Szia nekem olyan gondom lenne hogy Chrome alatt fut, de IE alatt nem akar legördülni a sáv azzal mit lehetne kezdeni?:) Köszi csáó

    • 2012. december 26. szerda - 22:49

      Sziasztok 🙂 megoldottam 🙂 de most olyan kérdésem lenne hogy olyat nem lehet rá tenni hogy automatikusan váltsa egymást??:) a három címsor?

  6. 2012. december 14. péntek - 20:35

    Lenne hozzád egy olyan kérdésem hogy itt a blogodon a hozzászólás rendszert milyen programozási nyelvvel készítetted?
    Nem csinálsz ehhez kapcsolódó tutorialt?
    🙂

    • 2012. december 14. péntek - 21:01

      Ez a WordPress blogmotor része.

    • 2012. december 14. péntek - 21:31

      Értem. Ez hasonló mint a CSS? WordPresshez még nem értek. Lehet hogy nagy baromságot kérdezek de ezt le kell tölteni valahol hogy használni lehessen?

    • 2012. december 14. péntek - 22:56

      Gugli első találatot nézd meg.

  7. 2012. november 1. csütörtök - 14:45

    Szia!

    Tudsz mondani valami megoldást arra hogy ez oldalra nyíljon így ki? SlideLeft függvényt nem találtam :/

  8. 2012. október 6. szombat - 23:41

    Ez örült jó! Nagyon szépen köszönöm a feltöltésed! 🙂

  9. 2012. október 3. szerda - 14:38

    szia!!
    jQuery forráskódot hova kell berakni?

    • 2012. november 19. hétfő - 15:23

      hello!

      jquery.com oldalon a jobb sarokban a download gomb felett a második lehetőséget jelöld be majd katt a downloadra, ekkor sok sok kód fog megjelenni a böngésző ablakodban. Nem is kell sehova menned, nyomsz egy Ctrl+s bill. kombinációt és beteszed a html meg többi a weboldallal kapcsolatos fájlod közé, és végül a html fájlodban a közé beírod ezt: (vagyis amit letöltöttél azt a fájlt kell berakni)!

      Remélem érthető volt valamennyire:)!

    • 2012. november 19. hétfő - 15:25

      na bakker a kód részleteket nem engedélyezte! remek, annyi maradt ki hogy a headek közé kell script ek közé betallózni(src) a fájl nevét amit letöltöttél

  10. 2012. október 2. kedd - 09:39

    Szia Cyrex!

    Nagyon szép megoldás, gratulálok. Chrome alatt tökéletes!
    Azonban IE 8 alatt a váltáskor h2 tagok közvetlenül egymás alá csúsznak. (10px ? eltartás nincs meg!)
    Az egér mozgatása után valahogy beáll az optimális állapot. Nem lehetne megoldani az IE alatt is a Chrome –hoz hasonló működést?

    Válaszodat, segítségedet előre is köszönöm

  11. 2012. szeptember 22. szombat - 16:01

    Kedves cyrex!
    Nagyon jó lett ez is és többi tutorialod is!!!
    Jó lenne több videó tutorial, mert már az összeset (!) megnéztem és többségüket meg is csináltam!

  12. 2012. szeptember 21. péntek - 22:02

    Üdv!

    Jól néz ki, köszi!

Hozzászólás

Keresés a blogon
Kategóriák
Legújabb hozzászólások
  • Az Axure használata

    A munkáltató biztosítja számodra a munkavégzéshez szükséges hardvereket és szoftvereket. Ha nem így van, akkor annál a cégnél nem szabad dolgozni....

  • Az Axure használata

    Köszi a választ! Annyit szeretnék még kérdezni, hogy ha olyan a munkahely hogy adobe szoftverekkel kell dolgozni mondjuk a saját gépemröl, akkor nekem...

  • Az Axure használata

    Próbafeladatot szoktak adni amit meg kell oldanod. Jobb esetben otthon, de nem egy olyan interjún voltam már, ahol leültettek egy géphez aztán ott hel...

  • Az Axure használata

    Hali. Azt szeretném kérdezni, hogy te mit tanácsolsz egy pályakezdö webdesignernek, ha el akar helyezkedni? Még nem dolgoztam korábban sosem webdesign...

  • A Bootstrap 4 grid használata

    Azt használsz ami tetszik. A CSS reset cuccok többsége lassan 10 éves, ma már nem nagyon van rájuk szükség. Bootstrap akkor kell, ha az adott projekth...

  • A Bootstrap 4 grid használata

    Szia! Nem rég kezdtem tanulni, kis segítséggel õssze tudok rakni egy oldalt Html+css a többivel még most ismerkednek. Nem nagyon vagyok vele tisztába ...

  • A villanyszerelés örömei panelben

    Nem, én B-t raktam mindenhova és most már ötödik éve nincs vele gondom....

  • A villanyszerelés örömei panelben

    Szia Jövő héten kezdek bele, egy ugyan ilyen projectbe. Még mindig tartod azt az állítást, hogy jó a C karakterisztikájú kismegszakító? És mé...

  • ActionScript 3 eseménykezelés

    Sima CSS animációt....

  • ActionScript 3 eseménykezelés

    Helló! Kiváló a "Banner mutációk" -ról szóló videód. A legnagyobb erénye számomra, hogy a hatékony munkavégzést is bemutattad. Amiért a flash témakor...

  • Egyszerű tükröződés készítése Photoshopban

    Koszi:)...

  • Bootstrap carousel

    Nem találkoztam még ilyennel, ezt a két linket találtam hozzá: https://stackoverflow.com/questions/16244306/single-picture-displaying-upside-down-in-b...