Horizontal Accordion using the Tabs

View
Download

HTML Coding

Our HTML setup is similar to the basic accordion setup except that the "headers" are now images:

<!-- accordion root -->

<div id="accordion">

<!-- 1st header and pane -->

<img pagespeed_lazy_replaced_functions="1" pagespeed_lazy_src="../../img/title/streaminge.png" alt="" src="//1-ps.googleusercontent.com/h/www.gstatic.com/psa/static/1.gif" onload="pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);">

<div style="width: 200px; display: block;"> .. pane content .. </div>

<!-- 2nd header and pane -->

<img pagespeed_lazy_replaced_functions="1" pagespeed_lazy_src="../../img/title/flash.png" alt="" src="//1-ps.googleusercontent.com/h/www.gstatic.com/psa/static/1.gif" onload="pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);">

<div> .. pane content ..</div>

<!-- 3rd header and pane -->

<img pagespeed_lazy_replaced_functions="1" pagespeed_lazy_src="../../img/title/streaming.png" alt="" src="//1-ps.googleusercontent.com/h/www.gstatic.com/psa/static/1.gif" onload="pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);">

<div> .. pane content ..</div>

</div>

 

JavaScript coding

The tabs configuration option defines what elements are used as "accordion headers" and we use the built-in sliding effect called "horizontal" that is suitable for horizontal accordions:

$("#accordion").tabs("#accordion div", {

tabs: 'img',

effect: 'horizontal'

});