jQuery accordion

Szerző: Mérei Tamás   |   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
  • Responsive menü

    Itt a működő kód, innen másold ki: https://cyrex.hu/uploads/2014/08/responsive-menu/...

  • Responsive menü

    Szia. A kódok alapján, meg persze a videót végignézve megcsináltam a menüt. Sajnos nem úgy működik, ahogy kellene. A menü3 almenüi nem gördülnek le, ...

  • A shape-outside CSS property

    Szerintem azt sehogy....

  • A villanyszerelés örömei panelben

    Panelban ugyan az a három fázis jön be három MCU-n és nem 3fázis... Keresztmetszet növelés miatt csinálták anno......

  • A shape-outside CSS property

    Szia Jó lett a videó. De mi van akkor ha a képet a szöveg közepére szeretném tenni, és azt akarom hogy így fusson körbe a szöveg....

  • Bootstrap űrlapok

    Jó lett :) Már kezdtem aggódni hogy eltűntél vagy valami hogy ilyen sokáig nem volt videó. 2 naponta néztem az oldaladat hogy hátha.... :)...

  • A villanyszerelés örömei panelben

    Ha három fázisod van, akkor három fázisú Fi relét kell venni....

  • A villanyszerelés örömei panelben

    Szia, ha panellakásba három vezetéken jön be az egy fázis, akkor három fi relét kellene berakni?...

  • A villanyszerelés örömei panelben

    "3 vezeték jön be, fázis-nulla-föld, tehát már az óránál szétválasztották a PEN vezetéket PE-re és N-re vagy más módon, de külön vezetéken jön az N és...

  • Dia szkennelés házilag

    Ezt a fajtát nem tudom, hogy lehet még kapni. Normál diavetítőt lehet kapni nagyobb játékboltokban például....

  • Bootstrap carousel

    Ennél a réginél nem tudom, hogy volt e már ilyen opció, de az újnál már van olyan, hogy touch="true"...

  • Adobe XD VS. Lunacy

    Sketch-et nem használok, mert nincs mac-em. Axure-t használok, arról találsz anyagot az oldalon....