Accordion css and javascript using checkboxes and radio options.

accordionism.css

/* Bare minimum styling to get ball rolling: */
.accordionism > div > input[type="radio"],
.accordionism > div > input[type="checkbox"] { display: none; }
.accordionism > div > label {
	position: relative;
	display: block;
	cursor: pointer;
	cursor: hand;
}
.accordionism > div > label:after {
	content: "+";
	position: absolute;
	right: 1em;
}
.accordionism > div > input ~ div { display: none; }
/*.accordionism > div > input:checked + label { background: #ccc; }*/
.accordionism > div > input:checked + label:after { content: "-"; }
.accordionism > div > input:checked ~ div { display: block; }

accordionism.js

// http://www.hongkiat.com/blog/css-only-accordion/
// https://gist.github.com/mhulse/b67db38d5993cf045346ab71a7333212
;(function($, undefined) {
	'use strict';
	$.fn.accordionism = function() {
		var inputs = [
			'> div > input[type="radio"]',
			'> div > input[type="checkbox"]'
		];
		var all = inputs.join(',');
		var active = 'accordionism-active';
		return this.each(function() {
			var $self = $(this);
			$self
				.find(all)
				.each(function(key, input) {
					var $input = $(input);
					if ($input.is(':checked')) {
						$input.addClass(active);
					}
				});
			$self.on('click', all, function() {
				var $this = $(this);
				$self
					.find(inputs[0])
					.not($this)
					.each(function(key, input) {
						$(input).removeClass(active);
					});
				if ($this.hasClass(active)) {
					$this.removeClass(active);
					if ($this.is(':radio')) {
						$this.prop('checked', false);
					}
				} else {
					$this.addClass(active);
				}
			});
		});
	};
}(jQuery));

$('.accordionism').accordionism();