Simple, Minimal jQuery Accordion

index.jade

.accordion.js-accordion(data-accordion-id="testAccordion")
	.accordion__header
		span Lorem ipsum dolor sit amet
		i.icon.icon-plus
		i.icon.icon-minus
	.accordion__body
		p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, beatae. Maxime quisquam labore optio excepturi doloremque aut natus itaque, cum beatae cumque, sit, est fuga autem sed minus iste eaque.

script.js

var $ = require('jquery');
var _ = require('lodash');

$.fn.toggleAccordion = function(action) {
	var $body = this.children('.accordion__body');
	var activeClass = 'accordion--active';
	var animationSpeed = 300;

	if (_.isBoolean(action)) {
		var classToggle = action ? 'addClass' : 'removeClass';
		var panelToggle = action ? 'slideDown' : 'slideUp';

		this[classToggle](activeClass);
		$body[panelToggle](animationSpeed);
	} else {
		this.toggleClass(activeClass);
		$body.slideToggle(animationSpeed);
	}

};

$('.js-accordion').each(function() {
	var $this = $(this);
	var $header = $this.children('.accordion__header');
	var accordionId = $this.data('accordion-id');

	$header.on('click', function() {
		// Close all current active accordions ones.
		var $accordionSet = $('.js-accordion[data-accordion-id="' + accordionId + '"]').not($this);
		$accordionSet.toggleAccordion(false);

		$this.toggleAccordion();
	});
});

style.styl

/* ==========================================================================
   Accordion
   ========================================================================== */

.accordion
	border-top 1px solid $color-primary-light
	&:last-child
		border-bottom 1px solid $color-primary-light

/* Header
	========================================================================== */

.accordion__header
	padding 15px
	cursor pointer
	position relative
	.icon
		position absolute
		top 50%
		right 0
		font-size 14px
		margin-top -(@font-size / 2)
		color $color-primary
	.icon-minus
		display none


/* Body
	========================================================================== */

.accordion__body
	padding 15px
	display none // Shown with jQuery


/* Active
	========================================================================== */

.accordion--active
	.accordion__header
		.icon-minus
			display block
		.icon-plus
			display none