Mérei Tamás webdesigner

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');
			}
		}
	});
});

Mérei Tamás Webdesigner

Szerző

Mérei Tamás vagyok, webdesigner. Reszponzív weboldalak készítésével foglalkozom, grafikai tervezéstől a HTML + CSS kódolásig.

Ismerj meg! Nézd meg eddigi munkáimat! Lépj velem kapcsolatba!

9 hozzászólás

  1. WebStarter
    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? 🙂 )

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

      Azért van, hogy használd 🙂

  2. WebStarter
    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?

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

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

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

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

    • cyrex
      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 🙂

    • WebStarter
      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

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

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

    • cyrex
      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

Legújabb hozzászólások