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
  • A Bootstrap 4 grid használata

    100% magasságot kell adni a bal oszlopnak....

  • WordPress sablon készítés

    Ne plugint használj, hanem írd bele a header.php-ba....

  • WordPress sablon készítés

    Hali. Beállítottam egy fav icont a weboldalamra, viszont nem látszik egyáltalán, csak akkor ha a WordPress adminjában vagyok. Szerinted ez miért van? ...

  • A Bootstrap 4 grid használata

    Hali. Nekem egy bootstrap 4-et használó oldalon van egy sorom, amiben van két oszlop. A bal oldali oszlopban van egy h2-es címsor, és két bekezdés. A ...

  • Az Advanced Custom Fields plugin használata

    Persze, a wysiwyg szerkesztővel tudsz videót is beszúrni....

  • Az Advanced Custom Fields plugin használata

    Ezzel a pluginnal youtube videót lehet beszúrni ugyanígy mint képet? Mert én nem tudtam igazán rájönni mit kéne kiválasztanom ehhez....

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