Skip to content

Instantly share code, notes, and snippets.

@mhulse mhulse/accordionism.css
Last active Feb 5, 2017

Embed
What would you like to do?
Accordion css and javascript using checkboxes and radio options.
/* 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; }
// 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();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.