zAccordion — Another Advanced Example

A visitor requested an accordion with effects similar to the accordion on the BBC Food website. This can be created with later releases of zAccordion.

Back to the Examples

City View
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras porttitor lacus sollicitudin ligula sagittis a ultricies nulla ultricies. Ut odio nisi, posuere sed blandit at, bibendum non dolor.
Knock Knock!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in condimentum sem. Aenean faucibus dignissim auctor. In ut libero vitae augue laoreet iaculis at a tellus.
Cigars on Sale
Duis viverra velit orci. Sed vestibulum mi nec est imperdiet sed ullamcorper augue molestie. Donec ultrices facilisis erat at porttitor.
On the Balcony
Phasellus sed lectus nisl, eget cursus eros. Suspendisse posuere orci eu lorem luctus et porta nunc posuere. Cras sed lectus vitae leo accumsan adipiscing.

Implementation

							$(document).ready(function() {
								$("#slider").zAccordion({
									width: 884,
									speed: 600,
									slideClass: "slider",
									animationStart: function() {
										$("#slider").find("li.slider-open div.slider-info").css("display", "none");
										$("#slider").find("li.slider-previous div.slider-info").css("display", "none");
									},
									animationComplete: function() {
										$("#slider").find("li.slider-open div.slider-info").fadeIn(600);
										$("#slider").find("li.slider-previous div.slider-info").fadeIn(600);
									},
									slideWidth: 600,
									height: 400
								});
							});

Similar to the Advanced Example, most of the CSS is used to style the tooltip, or info box.

							#slider li {overflow:visible !important;}
							#slider div.slider-bg {background:#000;top:300px;height:102px;width:600px;left:0;position:absolute;z-index:10;opacity:.5;}
							#slider strong {margin-bottom:5px;text-shadow:none;color:#fff;}
							#slider p {text-shadow:none;color:#fff;}
							#slider .slider-closed div.slider-info {top:300px;height:72px;left:0;position:absolute;width:65px;z-index:15;padding:15px;}
							#slider .slider-closed strong {font-size:18px;margin-bottom:5px;}
							#slider .slider-closed p {display:none;font-size:11px;line-height:14px;text-shadow:none;color:#fff;margin:0 !important;}
							#slider .slider-open div.slider-info {top:300px;height:72px;left:0;position:absolute;width:570px;z-index:15;padding:15px;}
							#slider .slider-open strong {font-size:22px;color:#fff;}

Back to the Examples