Responsive, Conditional Accordion Content

accordion.js

/*
 * Dead Simple, Responsive opt-in accordions
 * 
 * Requires:
 * - enquire.js
 * - jquery-inviewport.js
 * - unveil.js
 *
 */
(function($) {

	$(document).on('click', '.accordion-toggle', function() {
		var $el = $(this),
			$group = $el.parents('.accordion-group'),
			$current = $el.parents('.accordion-item'),
			$active = $('.accordion-item', $group).not($current),
			accordion = $group.data().hasOwnProperty('accordion') ? parseInt($group.data('accordion')) : true,
            scrollTo = $group.data().hasOwnProperty('scrollto') ? parseInt($group.data('scrollto')) : true,
			speed = 150;

		// Due to responsive opt-in, only handle accordions for '.enabled' groups
		if (!$group.hasClass('accordion-enabled')) {
			return;
		}

		// close siblings
		if (accordion) {
			$active.find('.accordion-content').slideUp(speed);
			$active.removeClass('active');
		}

		//$("img[data-src]", $el.siblings('.accordion-content')).trigger('unveil');
		//$current.find("img").trigger("unveil");


		// expand or collapse the current target
		if ($current.hasClass('active')) {
			$current.find('.accordion-content').slideUp(speed);
			$current.removeClass('active');	
		} else {
			$current.find('.accordion-content').slideDown(speed, function() {
				// If no longer in viewport, make it so
				// if (!$el.is(':in-viewport') && scrollTo === true) {
				// 	scrollToElement($el);
				// }
			});
			$current.addClass('active');
		}

		return false;

	});

	function disableAccordion($group) {
		$group.removeClass('accordion-enabled');
		$('.accordion-content', $group).css('display', '');
	}

	/*
	 * Conditional, Media Query Based Accordions
	 *
	 * !!!IMPORTANT!!! 
	 * If bootstrap breakpoints change, they should be changed here as well.
	 *
	 */

	$(document).ready(function() {

		enquire.register("screen and (max-width:991px)", {
			match : function() {
				$('.accordion-md:not(.accordion-enabled)').addClass('accordion-enabled');
			},
			unmatch : function() {
				disableAccordion($('.accordion-md.accordion-enabled'));
			}
		});

		enquire.register("screen and (max-width:767px)", {
			match : function() {
				$('.accordion-sm:not(.accordion-enabled)').addClass('accordion-enabled');
			},
			unmatch : function() {
				disableAccordion($('.accordion-sm.accordion-enabled'));
			}
		});

		enquire.register("screen and (max-width:480px)", {
			match : function() {
				$('.accordion-xs:not(.accordion-enabled)').addClass('accordion-enabled');
			},
			unmatch : function() {
				disableAccordion($('.accordion-xs.accordion-enabled'));
			}
		});
	});


})(jQuery);

accordion.scss

///////////////////////////////////////////////////////////////
//
// _accordions.scss
// Custom SF accordions
//
///////////////////////////////////////////////////////////////


// Accordion Defaults
// ------------------

.accordion-group.accordion-enabled {

	//For an element that doesn't want to toggle the accordion, but look like a label - Thunder
	.accordion-head
	{
		padding: 10px 40px 10px 20px; // Make right space for toggle when text wraps
		position: relative;
		

		.accordion-label
		{
			font-size: 16px;
			font-weight: bold;
			line-height: $line-height-base;
			margin: 0;
			padding: 0;
		}
	}

	// The Toggle
	.accordion-toggle {
		cursor: pointer;
		display: block;
		//padding: 10px 40px 10px 20px; // Make right space for toggle when text wraps
		padding: 10px 30px 10px 0;
		position: relative;

		* {
			margin: 0;
			padding: 0;
		}

		// Help reset possible font tags w/in
		.accordion-label {
			font-size: 16px;
			font-weight: bold;
			line-height: $line-height-base;
			margin: 0;
			padding: 0;
		}

		.accordion-label-sm
		{
			font-weight: bold;
			line-height: $line-height-base;
			margin: 0;
			padding: 0;
		}
		
		@extend [class^="pwicon-"];
		@extend .pwicon-down-open;

		&:before {
			position: absolute;
			right: 0;
			top: 10px;
			font-size: 2em;
		}

	}

	// Accordion Contents
	.accordion-content {
		display: none;
		padding: 20px 0;
	}

	// Active Item
	.accordion-item {
		display: block;

		&.active {

			.accordion-toggle {
				@extend .pwicon-up-open;
			}

			// Accordion Contents
			.accordion-content {
				display: block;
			}
		}
	}
}