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:

First pane

Consectetur adipiscing elit. Praesent bibendum eros ac nulla. Integer vel lacus ac neque viverra.

Second pane

Cras diam. Donec dolor lacus, vestibulum at, varius in, mollis id, dolor. Aliquam erat volutpat.

Third pane

Non lectus lacinia egestas. Nulla hendrerit, felis quis elementum viverra, purus felis egestas magna.

standalone demo

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.

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 src="/media/img/title/streaminge.png" />
    <div style="width:200px; display:block"> .. pane content .. </div>
 
    <!-- 2nd header and pane -->
    <img src="/media/img/title/flash.png" />
    <div> .. pane content ..</div>
 
    <!-- 3rd header and pane -->
    <img src="/media/img/title/streaming.png" />
    <div> .. pane content ..</div>
  </div>

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.

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