Submit your widget

Horizontal Accordion using the Tabs

Created 14 years ago   Views 25650   downloads 4036    Author flowplayer.org
Horizontal Accordion using the Tabs
View DemoDownload
154
Share |

HTML Coding

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

<!-- accordion root -->
<!-- 1st header and pane -->
.. pane content ..
<!-- 2nd header and pane -->
.. pane content ..
<!-- 3rd header and pane -->
.. pane content ..
 

 

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'
});