Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
jQuery Accordion Collapse
<h2>Features</h2>
<div id="accordion-example" data-collapse="accordion">
<h3>Feature 1</h3>
<div>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunc. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS</div>
<h3>Feature 2</h3>
<div>LAnim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunc. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</div>
<h3>Feature 3</h3>
<div>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunc. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</div>
<h3>Feature 4</h3>
<div>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunc. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
/*
* Collapse plugin for jQuery
* --
* source: http://github.com/danielstocks/jQuery-Collapse/
* site: http://webcloud.se/jQuery-Collapse
*
* @author Daniel Stocks (http://webcloud.se)
* Copyright 2013, Daniel Stocks
* Released under the MIT, BSD, and GPL Licenses.
*/
(function($, exports) {
// Constructor
function Collapse (el, options) {
options = options || {};
var _this = this,
query = options.query || "> :even";
$.extend(_this, {
$el: el,
options : options,
sections: [],
isAccordion : options.accordion || false,
db : options.persist ? jQueryCollapseStorage(el.get(0).id) : false
});
// Figure out what sections are open if storage is used
_this.states = _this.db ? _this.db.read() : [];
// For every pair of elements in given
// element, create a section
_this.$el.find(query).each(function() {
new jQueryCollapseSection($(this), _this);
});
// Capute ALL the clicks!
(function(scope) {
_this.$el.on("click", "[data-collapse-summary] " + (scope.options.clickQuery || ""),
$.proxy(_this.handleClick, scope));
_this.$el.bind("toggle close open",
$.proxy(_this.handleEvent, scope));
}(_this));
}
Collapse.prototype = {
handleClick: function(e, state) {
e.preventDefault();
state = state || "toggle";
var sections = this.sections,
l = sections.length;
while(l--) {
if($.contains(sections[l].$summary[0], e.target)) {
sections[l][state]();
break;
}
}
},
handleEvent: function(e) {
if(e.target == this.$el.get(0)) return this[e.type]();
this.handleClick(e, e.type);
},
open: function(eq) {
this._change("open", eq);
},
close: function(eq) {
this._change("close", eq);
},
toggle: function(eq) {
this._change("toggle", eq);
},
_change: function(action, eq) {
if(isFinite(eq)) return this.sections[eq][action]();
$.each(this.sections, function(i, section) {
section[action]();
});
}
};
// Section constructor
function Section($el, parent) {
if(!parent.options.clickQuery) $el.wrapInner('<a href="#"/>');
$.extend(this, {
isOpen : false,
$summary : $el.attr("data-collapse-summary",""),
$details : $el.next(),
options: parent.options,
parent: parent
});
parent.sections.push(this);
// Check current state of section
var state = parent.states[this._index()];
if(state === 0) {
this.close(true);
}
else if(this.$summary.is(".open") || state === 1) {
this.open(true);
} else {
this.close(true);
}
}
Section.prototype = {
toggle : function() {
this.isOpen ? this.close() : this.open();
},
close: function(bypass) {
this._changeState("close", bypass);
},
open: function(bypass) {
var _this = this;
if(_this.options.accordion && !bypass) {
$.each(_this.parent.sections, function(i, section) {
section.close();
});
}
_this._changeState("open", bypass);
},
_index: function() {
return $.inArray(this, this.parent.sections);
},
_changeState: function(state, bypass) {
var _this = this;
_this.isOpen = state == "open";
if($.isFunction(_this.options[state]) && !bypass) {
_this.options[state].apply(_this.$details);
} else {
_this.$details[_this.isOpen ? "show" : "hide"]();
}
_this.$summary.toggleClass("open", state !== "close");
_this.$details.attr("aria-hidden", state === "close");
_this.$summary.attr("aria-expanded", state === "open");
_this.$summary.trigger(state === "open" ? "opened" : "closed", _this);
if(_this.parent.db) {
_this.parent.db.write(_this._index(), _this.isOpen);
}
}
};
// Expose in jQuery API
$.fn.extend({
collapse: function(options, scan) {
var nodes = (scan) ? $("body").find("[data-collapse]") : $(this);
return nodes.each(function() {
var settings = (scan) ? {} : options,
values = $(this).attr("data-collapse") || "";
$.each(values.split(" "), function(i,v) {
if(v) settings[v] = true;
});
new Collapse($(this), settings);
});
}
});
// Expose constructor to
// global namespace
exports.jQueryCollapse = Collapse;
exports.jQueryCollapseSection = Section;
//jQuery DOM Ready
$(function() {
$.fn.collapse(false, true);
});
})(window.jQuery, window);
div#accordion-example {
border-bottom: 2px solid #457DBF;
}
body {
width: 90%;
}
h2 {
margin: 10px 0;
color: #000;
font-size: 18px;}
h3 {
margin: 0;
background-color: white;}
h3 a {
display: block;
padding: 10px;
padding-left: 32px;
margin: 0;
color: black;
text-decoration: none;
font-weight: normal;
border-top:2px solid #457DBF;
border-bottom:2px solid #457DBF;
margin-bottom: -2px;}
/*h3 a:hover{background: #457DBF;color: white;}*/
h3.open { background: #457DBF;}
h3.open a { color: white;background-position: 13px -25px; }
h3 + div { padding: 10px; }
h2 + div,
.example {
background: white;
overflow: hidden;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
margin-bottom: 20px;
border-right:2px solid #457DBF;
border-left:2px solid #457DBF;
border-bottom:2px solid #457DBF;
border-top-width: 0px;
border-bottom-width: 0px;
}
/* Pre hide sections with JavaScript on
--- */
h3+div {
display: none;
}
h3 a:after {
content: '+'; /* Unicode character for "plus" sign (+) */
font-size: 30px;
Font-weight: 700;
color: black;
float: right;
margin-top: -6px;
}
h3.open a:after {
content: "\2212";
font-size: 30px;
Font-weight: 700;
color: white;/* Unicode character for "minus" sign (-) */float: right;
margin-top: -9px;
}
/* Responsive design
---
@media screen and (max-width: 1056px) {
body {
width: 1672px;
}
.c2 {
margin-right: 0;
margin-bottom: 0;
}
}
.test { background: #ccc; padding: 10px; border-bottom: 1px solid #aaa;}
.test + div { background: #fff; padding: 10px; }
@media
only screen and (max-width: 704px),
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
body {
width: 320px;
}
.c1 {
margin-right: 0;
margin-bottom: 0;
}
h1 {
font-size: 28px;
text-shadow: 0px 0px 1px rgba(0,0,0,0.7);
}
}
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
body {
padding: 0 12px;
}
}*/
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.