jQuery Accordable Accordion Examples
1. Open First Panel on Page Load
-
Panel Heading One
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi velit mauris, euismod at leo et, tempor aliquam diam. Suspendisse erat arcu, iaculis et nisl sed, cursus pharetra justo. Praesent sodales gravida justo sed accumsan. Cras ornare posuere eleifend.
-
Panel Heading Two
Vestibulum molestie scelerisque orci. Mauris in mattis nunc. Morbi lobortis ante ac blandit congue. Donec non neque et turpis feugiat pretium ut sit amet orci. Mauris mi leo, laoreet et leo et, blandit pellentesque lectus. Mauris ultrices erat ac risus vestibulum interdum. Suspendisse dui metus, imperdiet eu justo nec.
-
Panel Heading Three
Pellentesque placerat mollis justo ut volutpat. Sed lobortis auctor consequat.
2. Open First & Third Panels on Page Load and Toggle Headings
-
Panel Heading One
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi velit mauris, euismod at leo et, tempor aliquam diam. Suspendisse erat arcu, iaculis et nisl sed, cursus pharetra justo. Praesent sodales gravida justo sed accumsan. Cras ornare posuere eleifend.
-
Panel Heading Two
Vestibulum molestie scelerisque orci. Mauris in mattis nunc. Morbi lobortis ante ac blandit congue. Donec non neque et turpis feugiat pretium ut sit amet orci. Mauris mi leo, laoreet et leo et, blandit pellentesque lectus. Mauris ultrices erat ac risus vestibulum interdum. Suspendisse dui metus, imperdiet eu justo nec.
-
Panel Heading Three
Pellentesque placerat mollis justo ut volutpat. Sed lobortis auctor consequat.
3. Use a jQuery Easing Function
-
Panel Heading One
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi velit mauris, euismod at leo et, tempor aliquam diam. Suspendisse erat arcu, iaculis et nisl sed, cursus pharetra justo. Praesent sodales gravida justo sed accumsan. Cras ornare posuere eleifend.
-
Panel Heading Two
Vestibulum molestie scelerisque orci. Mauris in mattis nunc. Morbi lobortis ante ac blandit congue. Donec non neque et turpis feugiat pretium ut sit amet orci. Mauris mi leo, laoreet et leo et, blandit pellentesque lectus. Mauris ultrices erat ac risus vestibulum interdum. Suspendisse dui metus, imperdiet eu justo nec.
-
Panel Heading Three
Pellentesque placerat mollis justo ut volutpat. Sed lobortis auctor consequat.
4. Callback Function After Transition
-
Panel Heading One
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi velit mauris, euismod at leo et, tempor aliquam diam. Suspendisse erat arcu, iaculis et nisl sed, cursus pharetra justo. Praesent sodales gravida justo sed accumsan. Cras ornare posuere eleifend.
-
Panel Heading Two
Vestibulum molestie scelerisque orci. Mauris in mattis nunc. Morbi lobortis ante ac blandit congue. Donec non neque et turpis feugiat pretium ut sit amet orci. Mauris mi leo, laoreet et leo et, blandit pellentesque lectus. Mauris ultrices erat ac risus vestibulum interdum. Suspendisse dui metus, imperdiet eu justo nec.
-
Panel Heading Three
Pellentesque placerat mollis justo ut volutpat. Sed lobortis auctor consequat.