Submit your widget
HomeAccordionHorizontal Accordion using the Tabs

Horizontal Accordion using the Tabs

Created 13 years ago   Views 24901   downloads 3877    Author flowplayer.org
Horizontal Accordion using the Tabs
View DemoDownload
142
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'
});

 

You might also like