responsive
1.2.6

headers

  • Available since: v1.2
  • Type: option
  • Data type: String
  • Default value: null

HTML element which is included in every slide (exactly one header per one slide). Clicking the header activates/deactivates the slide which contains the header.

Example:

$('.accordion').jAccordion({
	headers : '.title'
});

Dependencies

The described option only takes effect if the below listed conditions were met.

  • autoplay: false

Dependencies

Activating of the described option will automatically set the below listed options and their values, thus there is no need to set them manually and it's not even possible to change values of these options.

  • sticky: true
  • event: 'click'

Demo 1

Demo 1 demonstrates behaviour of the plugin with headers as 'div' elements. Try clicking title of closed slide to open it and then try clicking title of open slide to close it. Vertical accordion is used.

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris rhoncus, tellus non rutrum gravida, magna justo commodo sapien, a pellentesque nibh orci vel dolor. Aliquam urna nulla, ultrices non pharetra at, fermentum sit amet elit. Nullam luctus, lorem quis scelerisque accumsan, felis augue posuere ligula, sit amet pretium magna massa eu sapien.

Mauris rhoncus

Nulla laoreet enim quis felis volutpat fringilla. Cras gravida elementum elementum. Nulla ullamcorper diam id velit blandit egestas non eget leo. Praesent vel tortor eget felis tempus scelerisque non vel arcu.

Cras gravida elementum elementum

Fusce justo dolor, euismod nec pharetra eu, elementum id ligula. Curabitur convallis vehicula velit, ac venenatis orci hendrerit quis. Maecenas ultrices, sapien vitae feugiat rhoncus, lectus ipsum tempus leo, molestie tincidunt velit est ut mauris. Morbi adipiscing lobortis ligula quis sodales. Sed convallis aliquet pulvinar. Mauris dictum est condimentum purus malesuada non placerat nunc auctor. Nam blandit cursus iaculis. Cras viverra ullamcorper leo, ut tristique leo vehicula a. Phasellus odio elit, imperdiet blandit lacinia eget, luctus quis tellus.

Nulla et urna nec risus

Proin iaculis, purus quis tristique tincidunt, lorem turpis scelerisque arcu, sit amet dictum turpis neque quis metus. In hendrerit, sem at cursus posuere, turpis nibh vulputate lectus, consequat auctor neque erat vulputate nunc. Ut aliquet gravida arcu sit amet vestibulum. Pellentesque purus purus, sollicitudin aliquam tincidunt vel, accumsan vel mauris. Suspendisse potenti. Nulla et urna nec risus molestie adipiscing. Nulla non nibh risus, ac lobortis sem.

Nunc nisi tortor

Curabitur scelerisque, nibh sit amet convallis venenatis, felis tellus porttitor nisl, a commodo orci lectus eu urna. Nunc nisi tortor, luctus ac tempus ac, vestibulum sit amet elit. Praesent at leo a massa ornare luctus. Aliquam scelerisque, nibh non auctor pellentesque, neque ligula sagittis purus, sed porttitor diam tortor vel tortor. Vestibulum ut erat id libero mattis consequat at sit amet tortor. Vivamus sit amet leo mi. Pellentesque egestas, risus vel dignissim posuere, dolor justo congue arcu, in eleifend enim odio ac nisi.

Demo 2

Demo 2 demonstrates behaviour of the plugin with headers as 'div' elements. Try clicking title of closed slide to open it and then try clicking title of open slide to close it. Horizontal accordion is used.

j

iverra et ac nisi

A

met, consectetur

c

ongue sem libero

c

urabitur ullamcor

o

rci venenatis

r

honcus eros porta

d

onec commodo

i

mperdiet mollis

o

rci venenatis

n

isi posuere neque

jAccordion by maniacpc, exclusively for CodeCanyon