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 carousel

    Gondolom azóta biztos megoldottad, de azért belinkelem ide a legújabb verzióját a carousel-nek: https://getbootstrap.com/docs/4.1/components/carousel/...

  • HTML5 + CSS3 menü

    Az itt sajnos nem fog megjelenni, mert eszképeli amikor elposztolod a kommentet :(...

  • Responsive menü

    Ez a menü bot egyszerű, nem figyel ablak átméretezést és hasonlókat. Ha nincs benne tapasztalatod és nem akarsz vele szórakozni, akkor legegyszerűbb e...

  • Scrollbar színezgetés CSS-sel

    Érdekes felvetés, sosem foglalkoztam ezzel. Most ahogy megnéztem pár weboldalt teljesen véletlenszerűnek tűnik, hogy mikor tűnik el az address bar és ...

  • Bootstrap carousel

    Ha a legújabb Bootstrap-et használod és xs méretben el akarod tüntetni, akkor ez kell: .d-none .d-sm-block...

  • A flexbox model

    Lesz. Folyamatban van....

  • Scrollbar színezgetés CSS-sel

    Meglesni, megtanulni, továbbadni. Ez a helyes sorrend :)...

  • A villanyszerelés örömei panelben

    A legjobb, hogy múltkor akartam venni egy B10-est kismegszakítót. Megkérdezték a boltban, hogy mekkora a főmegszakítóm. Mondom 16-os. Erre rám akarták...

  • A villanyszerelés örömei panelben

    Örülök, hogy nem C16 Amperes az összes kismegszakító, sajnos ez manapság " divat " ! A világításra bőven elég a B6 Amperes kismegszakító, főleg azért ...

  • Scrollbar színezgetés CSS-sel

    Hali. Már régebb óta követlek, és rengeteget tanultam a videóidból, a szakmai tudásom alapjait, és még az alapokon túli tudásom jelentős részét is től...

  • HTML + CSS űrlap

    Hali, programozáshoz nem értek, de most a kliensoldali templétezés a divat. Vue JS, Angular, stb....

  • HTML + CSS űrlap

    Szia Tamás! Nagyon sokat segítettek a videóid. Köszönöm! Nem tudtam eldönteni melyik blogba írjak, ezt választottam. Azt szeretném kérdez...