jQuery accordion

Szerző:   |   2014-03-27

Korábban volt egy kezdetleges accordion az oldalon, most lássunk egy modernebb, reszponzív változatot jQuery UI alapokon.

A korábbi változat legfőbb problémája, hogy magas tartalomblokkok esetén nem követi a scroll, emiatt könnyű elveszni benne. Többféle megoldást kipróbáltam, de végül is ez tűnt a legegyszerűbbnek.

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

HTML forráskód

A jQuery UI a fejlécekből és a hozzájuk tartozó tartalmi dobozokból automatikusan accordion menüt készít. Nem számít, hogy milyen tag-et használunk fejlécnek vagy tartalomnak, a lényeg, hogy egy fejléc, egy tartalom legyen a sorrend. Ebben a példában a fejlécek <h2> tagek között, a tartalom pedig <div> tagek között van megadva.

A tartalmi blokk azért tartalmaz ennyi szöveget, hogy az automatikus scrollozást tudja szemléltetni.


	<div id="accordion">
		<h2>Header 1<span></span></h2>
		<div>
			<img src="pics/1.jpg" alt=""/>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam volutpat quis est quis euismod. Pellentesque eget tempor nulla, vel ornare sapien. Nullam interdum posuere risus, eget volutpat mi dapibus ac. Nunc vestibulum sem interdum auctor pharetra.</p>
			<p>Aenean non dictum felis, non feugiat nibh. Morbi eget interdum dui, ut mollis sapien. Pellentesque nunc lacus, pharetra a dolor at, pretium posuere enim. Suspendisse aliquet volutpat felis vel sagittis. Cras in est quis eros mattis dapibus.</p>
			<p>Nunc cursus, nisl hendrerit fermentum blandit, diam ipsum tincidunt nisl, quis feugiat eros sapien vel odio. Donec laoreet, turpis sed congue feugiat, neque diam mattis ligula, ac pulvinar arcu dui ac nulla. Fusce bibendum posuere nunc, in lacinia metus feugiat quis.</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam volutpat quis est quis euismod. Pellentesque eget tempor nulla, vel ornare sapien. Nullam interdum posuere risus, eget volutpat mi dapibus ac. Nunc vestibulum sem interdum auctor pharetra.</p>
			<p>Aenean non dictum felis, non feugiat nibh. Morbi eget interdum dui, ut mollis sapien. Pellentesque nunc lacus, pharetra a dolor at, pretium posuere enim. Suspendisse aliquet volutpat felis vel sagittis. Cras in est quis eros mattis dapibus.</p>
			<p>Nunc cursus, nisl hendrerit fermentum blandit, diam ipsum tincidunt nisl, quis feugiat eros sapien vel odio. Donec laoreet, turpis sed congue feugiat, neque diam mattis ligula, ac pulvinar arcu dui ac nulla. Fusce bibendum posuere nunc, in lacinia metus feugiat quis.</p>
		</div>
		<h2>Header 2<span></span></h2>
		<div>
			<img src="pics/2.jpg" alt=""/>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam volutpat quis est quis euismod. Pellentesque eget tempor nulla, vel ornare sapien. Nullam interdum posuere risus, eget volutpat mi dapibus ac. Nunc vestibulum sem interdum auctor pharetra.</p>
			<p>Aenean non dictum felis, non feugiat nibh. Morbi eget interdum dui, ut mollis sapien. Pellentesque nunc lacus, pharetra a dolor at, pretium posuere enim. Suspendisse aliquet volutpat felis vel sagittis. Cras in est quis eros mattis dapibus.</p>
			<p>Nunc cursus, nisl hendrerit fermentum blandit, diam ipsum tincidunt nisl, quis feugiat eros sapien vel odio. Donec laoreet, turpis sed congue feugiat, neque diam mattis ligula, ac pulvinar arcu dui ac nulla. Fusce bibendum posuere nunc, in lacinia metus feugiat quis.</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam volutpat quis est quis euismod. Pellentesque eget tempor nulla, vel ornare sapien. Nullam interdum posuere risus, eget volutpat mi dapibus ac. Nunc vestibulum sem interdum auctor pharetra.</p>
			<p>Aenean non dictum felis, non feugiat nibh. Morbi eget interdum dui, ut mollis sapien. Pellentesque nunc lacus, pharetra a dolor at, pretium posuere enim. Suspendisse aliquet volutpat felis vel sagittis. Cras in est quis eros mattis dapibus.</p>
			<p>Nunc cursus, nisl hendrerit fermentum blandit, diam ipsum tincidunt nisl, quis feugiat eros sapien vel odio. Donec laoreet, turpis sed congue feugiat, neque diam mattis ligula, ac pulvinar arcu dui ac nulla. Fusce bibendum posuere nunc, in lacinia metus feugiat quis.</p>
		</div>
		<h2>Header 3<span></span></h2>
		<div>
			<img src="pics/3.jpg" alt=""/>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam volutpat quis est quis euismod. Pellentesque eget tempor nulla, vel ornare sapien. Nullam interdum posuere risus, eget volutpat mi dapibus ac. Nunc vestibulum sem interdum auctor pharetra.</p>
			<p>Aenean non dictum felis, non feugiat nibh. Morbi eget interdum dui, ut mollis sapien. Pellentesque nunc lacus, pharetra a dolor at, pretium posuere enim. Suspendisse aliquet volutpat felis vel sagittis. Cras in est quis eros mattis dapibus.</p>
			<p>Nunc cursus, nisl hendrerit fermentum blandit, diam ipsum tincidunt nisl, quis feugiat eros sapien vel odio. Donec laoreet, turpis sed congue feugiat, neque diam mattis ligula, ac pulvinar arcu dui ac nulla. Fusce bibendum posuere nunc, in lacinia metus feugiat quis.</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam volutpat quis est quis euismod. Pellentesque eget tempor nulla, vel ornare sapien. Nullam interdum posuere risus, eget volutpat mi dapibus ac. Nunc vestibulum sem interdum auctor pharetra.</p>
			<p>Aenean non dictum felis, non feugiat nibh. Morbi eget interdum dui, ut mollis sapien. Pellentesque nunc lacus, pharetra a dolor at, pretium posuere enim. Suspendisse aliquet volutpat felis vel sagittis. Cras in est quis eros mattis dapibus.</p>
			<p>Nunc cursus, nisl hendrerit fermentum blandit, diam ipsum tincidunt nisl, quis feugiat eros sapien vel odio. Donec laoreet, turpis sed congue feugiat, neque diam mattis ligula, ac pulvinar arcu dui ac nulla. Fusce bibendum posuere nunc, in lacinia metus feugiat quis.</p>
		</div>
		<h2>Header 4<span></span></h2>
		<div>
			<img src="pics/3.jpg" alt=""/>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam volutpat quis est quis euismod. Pellentesque eget tempor nulla, vel ornare sapien. Nullam interdum posuere risus, eget volutpat mi dapibus ac. Nunc vestibulum sem interdum auctor pharetra.</p>
			<p>Aenean non dictum felis, non feugiat nibh. Morbi eget interdum dui, ut mollis sapien. Pellentesque nunc lacus, pharetra a dolor at, pretium posuere enim. Suspendisse aliquet volutpat felis vel sagittis. Cras in est quis eros mattis dapibus.</p>
			<p>Nunc cursus, nisl hendrerit fermentum blandit, diam ipsum tincidunt nisl, quis feugiat eros sapien vel odio. Donec laoreet, turpis sed congue feugiat, neque diam mattis ligula, ac pulvinar arcu dui ac nulla. Fusce bibendum posuere nunc, in lacinia metus feugiat quis.</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam volutpat quis est quis euismod. Pellentesque eget tempor nulla, vel ornare sapien. Nullam interdum posuere risus, eget volutpat mi dapibus ac. Nunc vestibulum sem interdum auctor pharetra.</p>
			<p>Aenean non dictum felis, non feugiat nibh. Morbi eget interdum dui, ut mollis sapien. Pellentesque nunc lacus, pharetra a dolor at, pretium posuere enim. Suspendisse aliquet volutpat felis vel sagittis. Cras in est quis eros mattis dapibus.</p>
			<p>Nunc cursus, nisl hendrerit fermentum blandit, diam ipsum tincidunt nisl, quis feugiat eros sapien vel odio. Donec laoreet, turpis sed congue feugiat, neque diam mattis ligula, ac pulvinar arcu dui ac nulla. Fusce bibendum posuere nunc, in lacinia metus feugiat quis.</p>
		</div>
	</div>

CSS forráskód

A jQuery UI-ban megvannak a szabvány class nevek. Az aktív fejléc elemre a ui-accordion-header-active class kerül rá.


* { margin: 0; padding: 0; border: 0; outline: none }
body {
	font-size: 100%;
	background-image: url('pics/bg1.png'), url('pics/bg2.png');
	background-repeat: no-repeat, repeat;
	background-color: #282828;
	background-position: top center, top left;
	color: #bfbfbf;
	font-family: 'Arvo', serif;
}

/* reszponzív képméretek */
img {
	max-width: 100%;
}
h1 {
	text-align: center;
	color: #f5ae14;
	margin: 40px 0;
	font-size: 270%;
	text-shadow: 2px 2px 2px rgba(0,0,0,0.5)
}
div#accordion {
	width: 90%;
	max-width: 600px;
	margin: 0 auto;
	text-align: justify
}
h2 {
	position: relative;
	background: rgba(0,0,0,0.2);
	border-left: 10px solid rgba(0,0,0,0.5);
	cursor: pointer;
	padding: 2% 3%;
	margin: 0 0 10px 0;
	font-weight: normal;
	color: #fff;
	text-shadow: 2px 2px 2px rgba(0,0,0,0.3)
}

/* fejlécek jobb oldalán látható kis nyíl */
h2 span {
	position: absolute;
	top: 50%;
	right: -26px;
	margin-top: -7px;
	width: 26px;
	height: 14px;
	background: url('pics/arrow.png') center center no-repeat;
	transition:  all 0.2s ease-in-out;
	opacity:0
}
h2:hover {
	background: rgba(255,255,255,0.1)
}

/* hoverre beúszik a nyíl */
h2:hover span {
	right: 20px;
	opacity: 1;
	transition: all 0.2s ease-in-out
}

/* tartalom */
div#accordion div {
	line-height: 1.8;
	font-size: 85%;
	padding: 3%	
}
div#accordion div p {
	margin: 0 0 4% 0;
}

/* aktív fejléc */
h2.ui-accordion-header-active {
	color: #aec38f;
	background: rgba(130,190,40,0.5);
}

/* aktív fejlécnél megfordítjuk a nyilat 180 fokkal */
h2.ui-accordion-header-active span {
	-webkit-transform:rotate(180deg);
	transform:rotate(180deg);
	opacity: 1;
	right: 20px
}

jQuery forráskód

Mivel az accordion működését a jQuery UI tartalmazza, ezért csak inicializálni kell a scriptet és megadni a beállításokat, ha a gyári működéstől eltérőt szeretnénk.


$(function() {

	//accordion inicializálása
	$("#accordion").accordion({
		//lehetővé teszi, hogy valamennyi elemet be tudjuk zárni, tehát nem muszáj lennie nyitott elemnek
		collapsible: true,

		//az egyes panelek magasságát azok tartalmához igazítja
		heightStyle: "content",

		//animáció után végrehajtott esemény, jelen esetben scrollozás a tartalom fejlécéhez
		activate: function( event, ui ) {
			if(!$.isEmptyObject(ui.newHeader.offset())) {
				$('html:not(:animated), body:not(:animated)').animate({ scrollTop: ui.newHeader.offset().top }, 'slow');
			}
		}
	});
});

9 hozzászólás

  1. 2014. április 1. kedd - 15:33

    Működik. Az a poén, hogy azt a kódot használtam hozzá, amit Te adtál meg a tutorial leírásában. (Ugye nem baj, hogy felhasználom? 🙂 )

    • 2014. április 1. kedd - 15:47

      Azért van, hogy használd 🙂

  2. 2014. március 27. csütörtök - 16:35

    Szia!
    Szerinted miért nem működik az a feltétel, ami szerint ha IE alól nézik az oldal másik CSS-t húz be az oldal?
    Megcsináltam egy oldalt, amiben a menü hover állapotához be van állítva egy transition. Minden böngészőben tökéletesen működik, kivétel hát ugye az IE.
    Azzal is próbálkoztam már, hogy a transitiont egy külön CSS-be rakom és csak akkor húzza be, ha nem IE alól nézik az oldalt.
    De ez sem sikerül.

    Szerinted mi a gond?

    • 2014. március 27. csütörtök - 16:39

      Hányas IE? A transition csak a 10-estől működik.

    • 2014. március 29. szombat - 08:07

      Aszt hiszem a legújabb… Igen, mert a Windows 8.1 -ben az van benne.

    • 2014. március 29. szombat - 22:23

      Látatlanba fogalmam sincs. Wikin is van külön bejegyzés róla: http://en.wikipedia.org/wiki/Conditional_comment

      Őszinte leszek: nem használok ilyeneket csak nagyon nagyon ritkán. Ha kész van egy oldal, megnézem Chrome, Firefox, Opera, Safari és aktuális IE alatt, valamint Android-os telefonon, iPhone-on és tableten. Csak akkor kezdek el conditional CSS-t írni, ha valamelyik alatt olyan szinten van elcsúszva valami ami már rontja a használhatóságot. IE6,7,8-as dolgokkal már nagyon régóta nem foglalkozom. A 8-as verzió 2009-ben jelent meg, a 9-es 2011-ben, úgyhogy lassan az is elavultnak számít. Amíg a Microsoft lép egy verziót, addig krómból és firefox-ból kijön vagy 10 🙂

    • 2014. március 30. vasárnap - 13:08

      Ránéztem elem kivizsgálásával IE alatt, megjelennek az A tagek, be is keretezi, csak a transition rosszul hat e nagyon elavult böngészőre:

      http://kepkezelo.com/images/fj6a8f83lgaawijnvw6u.png

    • 2014. március 30. vasárnap - 13:24

      Próbáltam a wikin lévőt de nem műxik

    • 2014. március 30. vasárnap - 22:16

      Ha ezt a linket megnyitod IE alatt, ebben működik a transition?
      http://cyrex.hu/uploads/2013/07/css-transition/

Hozzászólás

Keresés a blogon
Kategóriák
Legújabb hozzászólások
  • 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....

  • Adobe XD VS. Lunacy

    Kedves Cyrex! A Sketch és az Axure UX-UI designer programok? Te melyiket használod ha használsz ilyen programokat? Köszönöm, üdv Balázs...

  • Bootstrap carousel

    Kedves Tamás! Az megoldható, hogy mobilon ne a nyilakra koppintva, hanem ujjal húzva váltsam a képeket? Köszönöm a sok hasznos videót. Üdvözlettel:...

  • Dia szkennelés házilag

    Ilyen diavetítőt hol lehet beszerezni?...

  • A villanyszerelés örömei panelben

    Ha nincsen a házban központilag rendbe rakva, akkor veszett fejsze nyele... Kialakíthatsz otthon EPH sínt, de ez már egy másik szint. 7kW felett 10m...

  • A villanyszerelés örömei panelben

    Ez a kábelcsatornás szegőléc nagyon jól néz ki. Szinte biztos, hogy a fürdő / konyha földelése lesz. Máshova nem vittek régen földet. Ha te húzod be a...

  • A villanyszerelés örömei panelben

    Köszönöm a gyors választ, akkor megpróbálom multiméterrel megkeresni, remélem csak a fürdő és a konyha földelését vitték innnen, nem a szomszéd lakásé...

  • A villanyszerelés örömei panelben

    A folyosón kábelcsatornában jött az órától, a bejárató ajtó felett meg be volt vakolva a falba a három bejövő vezeték. Szerencsére minimális romboláss...

  • A villanyszerelés örömei panelben

    Szia Tamás! Már hosszú ideje nézem ezt a cikkedet (szó szerint évek óta), de pár kérdésem felmerült a témában: 1. Az elosztóban az a piros vezeték, ...

  • A villanyszerelés örömei panelben

    MMCu a megnevezése (fekete, kék ér egymás mellett majd picit távolabb a zöld-sárga). Léteznek olyan fehér köpenyszigetelésű Mfal (nem írtam el, csak ...