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
  • Bootstrap 4 setup

    Shift + Tab...

  • Bootstrap 4 setup

    Hali. Hogy csinálod azt a videókban, hogy egyszerre törölsz több sor tabulátorát is? Hogy kijelölsz egy részt és azok mögül mind törölsz tabulátort eg...

  • Dia szkennelés házilag

    Örülök, hogy segített az írás....

  • Dia szkennelés házilag

    Nagyon szépen köszönöm, hogy leírta próbálkozásait, mert engem is gondolkodásra késztetett. Több száz diaképem van, de én sem akartam kisebb vagyont k...

  • Adobe XD VS. Lunacy

    Ez egy lebutított vektorgrafikus rajzolóprogram, semmi több. Ha az alkalmazásod / weboldalad tartalmaz raszteres elemeket, azokat PS-ben kell külön le...

  • Adobe XD VS. Lunacy

    Szerintem (ez csak az én meglátásom) az XD inkább csak mobil alkalmazás fejlesztésére van. Nem igazán látom azokat a funkciókat benne amiket PS-ben. N...

  • Adobe XD VS. Lunacy

    A Photoshop sosem volt igazán weboldal tervező program. A Fireworks közelebb volt hozzá annak idején, de azt megszüntették. Más kérdés, hogy még mindi...

  • Adobe XD VS. Lunacy

    Meg a PS amúgy sem ingyenes, szóval az Xd egy jó alternatíva az ilyen esetekre....

  • Adobe XD VS. Lunacy

    Dehogynem. Csak most ez a divat, hogy kattintható prototípusokat hozzunk létre....

  • Adobe XD VS. Lunacy

    PS nem megfelelő?...

  • Adobe XD VS. Lunacy

    Az Xd vel fogom csinálni a weboldalak layoutját ezentúl....

  • Adobe XD VS. Lunacy

    A Lunacy-ban az "images, comments, messages" részt nem sikerűlt egyenlő távolságra alakítani :) Maradjunk az XD-nél :)...