Horizontal accordion using the tabs
It's easy to create horizontal accordions with tabs. Just use the built-in horizontal effect and a little bit of CSS tweaking. Here is an example:
Consectetur adipiscing elit. Praesent bibendum eros ac nulla. Integer vel lacus ac neque viverra.
Cras diam. Donec dolor lacus, vestibulum at, varius in, mollis id, dolor. Aliquam erat volutpat.
Non lectus lacinia egestas. Nulla hendrerit, felis quis elementum viverra, purus felis egestas magna.
Of course, you can create wildly different looks and sizes with CSS and you can set the event configuration property to mouseover so that the panes are revealed upon mouseover.
Our HTML setup is similar to the basic accordion setup except that the "headers" are now images:
We are using the CSS file: tabs-accordion-horizontal.css for styling. Note that the initially opened pane must have an inline style declaration for its width and display. The width specifies the pane width when it is opened and the display must be set to block so that it is initially visible.
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: