LIDOR SYSTEMS

Advanced User Interface Controls and Components

Horizontal Expand in Accordion jQuery

Created: 07 April 2014

In general Accordion is a widget containing of groups with headers and content panels which expands its content vertically. IntegralUI Accordion extends this further allowing to horizontally expand the content of groups. In following section we will describe this feature in more details.

Vertical Expand in Accordion jQuery

Vertical Expansion

Horizontal Expand in Accordion jQuery

Horizontal Expansion

Accordion is part of IntegralUI Studio for Web
a suite of UI Components for development of web apps

Horizontal Expansion

There are two ways to allow groups to expand its content horizontally, by setting the expandDirection to:

  • right - group content expands from left to right
  • left – group content is expanded from right to left

$(document).ready(function() {

// Create an instance of Accordion widget

var $bar = $('#accordion').accordion({

expandDirection: 'right',

hoverSelection: true

});

});

Using code above, the accordion will expands its content from left to right, when mouse cursor hovers over group header.

Related: Inline Expand in Accordion jQuery

By default the content of group headers, caption or custom content, is displayed horizontally. We can also show header displayed vertically while its content panel remains expanding horizontally. This is done by chaining the headerContentOrientation property:

  • horizontal - group header displays its content horizontally
  • vertical – group header displays its content vertically, a clockwise rotation of 90 degrees

// Create the content of group panel

var generateGroupContent = function(){

return "<div class='group-content marker-left'><a href=''>read more</a>Lorem ipsum dolor sit amet ... </div>";

}

Vertical Expansion

In vertical expansion, each group can expand its content either downwards or upwards. To enable this we are using the expandDirection property, with following values:

  • down - group content expands downwards
  • up – group content expands upwards

// Create an instance of Accordion widget

var $bar = $('#accordion').accordion({

expandDirection: 'up'

});

Using code above, the accordion will expands its content upwards whenever group header is clicked. Expanding while mouse cursor hovers over group header is disabled.

  • animationSpeed – the speed of animation, default 500ms
  • hoverSelection – group expands when mouse hovers over its header, default false
  • showExpandBox – shows an expand box icon, default true

Here is a link to a demo which shows Changing of Expand Direction in Accordion jQuery.

Did you Like this Article?


Enter your e-mail address below and you will receive latest articles as well as news on upcoming events and special offers.