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
  • HTML5 + CSS3 menü

    Ki az a Sanyi?...

  • Scrollbar színezgetés CSS-sel

    Köszi a választ. Igen, egyébként azt használtam, amit először küldtél, és azzal állt fent az említett probléma. Már váltottam plugint azóta, és már me...

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