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
  • WordPress sablonkészítés

    Nem vagyok programozó, de ezek nagyon alap dolgok. A WP-ben használt függvények nevei és paraméterei megtalálhatók a dokumentációban....

  • WordPress sablonkészítés

    Szia Tamás! Valahol régebben írtad, hogy te webdesigner vagy és nem webfejlesztő (ahol már kódolás kell), mégis profin vágod a php-t. pl., hogy hívju...

  • A Bootstrap 4 grid használata

    Nem tudom, én nagy projektekbe csak alvállalkozóként megyek bele ahol órabérben lehet számlázni és a fővállalkozó garantáltan fizet. De azt is csak ak...

  • WordPress sablonkészítés

    Köszönöm szépen!...

  • WordPress sablonkészítés

    add_action( 'wp_print_styles', 'remove_css', 100 ); function remove_css() { wp_dequeue_style( 'wp-block-library' ); wp_deregister_style( 'wp-b...

  • WordPress sablonkészítés

    Szia Tamás! Hogy lehet kigyakni a head-ből az új, 5.0.2-es wordpress Gutenberg CSS link-rel sorát? Ezt: Próbáltam egy csomó remove_action-t de ...

  • A Bootstrap 4 grid használata

    Az előleg hány százalék? Ha megcsinálod az egészet, és mégsem kell neki, akkor is bukod a teljes munkadíjat, nem? Vagy fázisonként fizettesz vele?...

  • Reszponzív weboldal tervezés Bootstrap használatával

    A media object-ed tudod erre használni: https://www.w3schools.com/bootstrap/bootstrap_media_objects.asp...

  • Reszponzív weboldal tervezés Bootstrap használatával

    Kedves Tamás! Nagyon szuper ez a videód is. Szeretnélek megkérdezni, hogy Bootstrap 3-ban működik-e az, hogy a dobozok szöveges tartalmát nem a doboz ...

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