---
title: jQuery Accordion and Carousel Plugin
description: >-
  Download the most useful two in one plugin that is Accordion effect combined with Carousel, made
  in jQuery. You have a lot of custom options also :).
url: https://expiredqueues.com/jquery-accordion-carousel-plugin/
date: '2012-03-30T05:26:25.000Z'
image: https://expiredqueues.com/images/og/jquery-accordion-carousel-plugin-b89bc5a2.jpg
---

Written in March 2012. Much of what it describes has since changed or disappeared; it is kept as a record of how the web used to work, not as advice.

jQuery posts accordion

# jQuery Accordion with Carousel - Accarousel

30 March 2012 By Adrian 3 min read

A week ago one of my friends had requested me to suggest any jQuery plug-in that is carousel with accordion effect inside. I tried to find one suitable plugin - but couldn't make it. That made me write my own custom plugin that consists of both carousel and accordion effect. One more requirement was to flyout the most closed sibling elements to outside and hide the rest of all when the accordion expands.

[![Accordion](https://expiredqueues.com/images/opt/accordion-320.jpeg)](https://expiredqueues.com/demo/accarousel/)

So here I come with a solution and made it a plugin so that it might be useful for all of us. I love to code for re-use.

[Demo](https://expiredqueues.github.io/Accarousel/ "Accordion with Carousel Demo") · [Source on GitHub](https://github.com/expiredqueues/Accarousel)

## Usage:

Here is how you can use this plug-in on your side:

### HTML Markup

```html

<div id="accarousel">
   <ul>
	<li>
              <a class="stand">Initial visible contents</a>
              <div class="detail-panel">Contents for accordion when exapands</div>
        </li>
   </ul>
</div>
```

You can add as many \<li> as you want and any kinds of contents insid&#x65;**&#x20;'.stand'** and **'.detail-panel'**. Pagination will occur according to your choice to group how many items should be visible on stage. Now you need to initialize the plugin. Before that you must include the plugin source in your html page. Include our plugin file after you added the main jQuery library.

[![Carousel](https://expiredqueues.com/images/opt/carousel-320.jpeg)](https://expiredqueues.com/demo/accarousel/)

### Scripts

Now add the following script on the page, better you put this script at the end of the page:

```js

    $(document).ready(function() {
        $('#accarousel').cjAccarousel(); //#accarousel is your selector ID, see the html mark up above.
    });
```

Furthermore you have more options to customize to fit your requirement and ease of work. Till the date, you can set your own values for following options:

```js

    $(document).ready(function() {
        $('#accarousel').cjAccarousel(
          {
              stand		: '.stand',        /* Visible stands element selector (class basically) */
              panel		: '.detail-panel', /* Expandable element selector (class basically)   */
              pagerClass	: 'pager',         /* Pager CSS Class */
              x			: '.detail-panel', /* Panel Collapse handler */
              groupOf		: 5,               /* Number of stands for visible group*/
              scrollSpeed	: 1000,            /* Carousel Speed */
              ease		: 'swing',         /* Use jQuery Easing Plug in for more easing effects */
              flyOutGap	        : 3,               /* Gap between expanded and other two flyouts */
              nextPrev	        : true             /* set false to disable Next/Prev Nav */

          }
	);
    });
```

You can add our basic styling CSS to get started and after all you can edit/modify it according to your need. That's it.  If you're happy to get a copy of my scripts, get it here:

[Download](https://github.com/expiredqueues/Accarousel/archive/master.zip)

I will be working more on it, adding more features and effects. I would appreciate it if you guys can give me valuable feedback on it. Also if you encounter any problem, let me know in the comments below.

[Previously Check (Glossy) Icon Freebie](https://expiredqueues.com/glossy-check-icon/) [Next It Fits :: Free HTML5 CSS3 Responsive Template](https://expiredqueues.com/html5-css3-responsive-web-template/)

## Structured data

```json
{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "jQuery Accordion with Carousel - Accarousel",
  "datePublished": "2012-03-30T05:26:25.000Z",
  "dateModified": "2012-03-30T05:26:25.000Z",
  "author": {
    "@type": "Person",
    "name": "Adrian",
    "url": "https://expiredqueues.com/about/"
  },
  "publisher": {
    "@type": "Person",
    "name": "Adrian"
  },
  "mainEntityOfPage": "https://expiredqueues.com/jquery-accordion-carousel-plugin/",
  "image": "https://expiredqueues.com/images/2012/accordion.jpg",
  "keywords": "posts, accordion, carousel, plugin, resources, slideshow",
  "articleSection": "jQuery"
}
```