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.

This example was not built to support smaller screen sizes such as mobile devices. However, the latest version of zAccordion can be configured to support these devices using media queries. Please see the example demonstrating responsive design.

« Back to the Examples

City View
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras porttitor lacus sollicitudin ligula sagittis.
Knock Knock!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in condimentum sem.
Cigars on Sale
Duis viverra velit orci. Sed vestibulum mi nec est imperdiet sed ullamcorper augue molestie.
On the Balcony
Phasellus sed lectus nisl, eget cursus eros. Suspendisse posuere orci eu lorem luctus.


																					<ul id="slider">
												<li>
													<img src="statue.jpg" alt="" />
													<div>
														<strong>City View</strong>
														<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras porttitor lacus sollicitudin ligula sagittis.</p>
													</div>
												</li>
												<li>
													<img src="door.jpg" alt="" />
													<div>
														<strong>Knock Knock!</strong>
														<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in condimentum sem.</p>
													</div>
												</li>
												<li>
													<img src="shop.jpg" alt="" />
													<div>
														<strong>Cigars on Sale</strong>
														<p>Duis viverra velit orci. Sed vestibulum mi nec est imperdiet sed ullamcorper augue molestie.</p>
													</div>
												</li>
												<li>
													<img src="balcony.jpg" alt="" />
													<div>
														<strong>On the Balcony</strong>
														<p>Phasellus sed lectus nisl, eget cursus eros. Suspendisse posuere orci eu lorem luctus.</p>
													</div>
												</li>
											</ul>


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


																							$(document).ready(function() {
													$("#slider").zAccordion({
														tabWidth: 100,
														speed: 650,
														slideClass: 'slider',
														animationStart: function () {
															$('#slider').find('li.slider-open div').css('display', 'none');
															$('#slider').find('li.slider-previous div').css('display', 'none');
														},
														animationComplete: function () {
															$('#slider').find('li div').fadeIn(600);
														},
														width: 700,
														height: 265
													});
												});

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


																					#slider {background-color:rgba(0,0,0,0.5);bottom:0;height:100px;left:0;position:absolute;width:100%;z-index:10;}
											#slider .slider-closed {width:100px;}
											#slider strong {color:#fff;display:block;margin-bottom:5px;padding:10px 10px 0;text-shadow:none;}
											#slider p {color:#fff;display:block;font-size:14px;padding:0 10px;text-shadow:none;}
											#slider .slider-open strong {color:#fff;font-size:22px;}
											#slider .slider-closed strong {font-size:18px;margin-bottom:5px;}
											#slider .slider-closed p {display:none;}

« Back to the Examples