Skip to content

Instantly share code, notes, and snippets.

@clrockwell
Created April 2, 2014 03:39
Show Gist options
  • Save clrockwell/80458f3f49f7274b6652 to your computer and use it in GitHub Desktop.
Save clrockwell/80458f3f49f7274b6652 to your computer and use it in GitHub Desktop.
Had a seemingly rare requirement for an accordion that the designer could specify which sections were open and closed by default -- requires the accordion to calculate height of several elements rather than just, for example, a heading
/**
* @file
*
*
*
*/
(function ($) {
Drupal.behaviors.listen_to_open = function (item) {
item.find('.accordion-trigger a').click(
function () {
var closedOpen = false;
// if this one is open, just close it
if (item.hasClass('accordion-open')) {
Drupal.behaviors.smoothAccordionCloseItems();
} else {
// close all others, then open this one
Drupal.behaviors.smoothAccordionCloseItems();
Drupal.behaviors.smoothAccordionOpenItems(item);
}
return false;
}
)
}
Drupal.behaviors.smoothAccordionCloseItems = function () {
$('.accordion-open').each(
function () {
$this = $(this);
$this.animate({
height: $this.attr('data-close-height'),
})
.removeClass('accordion-open').addClass('accordion-closed');
}
)
}
Drupal.behaviors.smoothAccordionOpenItems = function (item) {
if (item == undefined) {
// @todo open all
//$('.multi-image-wrapper, .accordion-item-body');
}
else {
Drupal.behaviors.smoothAccordionAnimateOpen(item);
}
}
Drupal.behaviors.smoothAccordionAnimateOpen = function(items) {
// loop through each and open
var bodyHeight;
var targetHeight;
for (var i = 0; i < items.length; i++) {
$item = $(items[i]);
$item.animate({
height: $item.attr('data-open-height')
}).removeClass('accordion-closed').addClass('accordion-open');
}
}
Drupal.behaviors.smoothAccordionAddDataHeight = function (accordions) {
// for each accordion, get the aggregate height of all elements
// that should not be closed and store them for use later
// meh. check for product showcase
// @todo clean up
$ps = $('.product-showcase-accordion');
$pro = $('.promotions-accordion');
var $this;
accordions.each(
function() {
$this = $(this);
if ($ps.length > 0 || $pro.length > 0) {
var bodyHeight = $this.find('.product-showcase-copy-container').height();
} else {
var bodyHeight = $this.height();
}
var imgHeight = $this.find('img:first').height()*1.25;
var closedHeight = 0;
//var openHeight = $this.height() + $this.find('img:first').height()*1.25;
var openHeight = bodyHeight > imgHeight ? bodyHeight : imgHeight;
$this.find('.accordion-no-close').each(
function () {
closedHeight += $(this).height();
console.log(closedHeight);
if($ps.length > 0) {
closedHeight += 15;
}
if( $pro.length > 0) {
closedHeight += 5;
}
}
)
$this.attr('data-close-height', closedHeight).attr('data-open-height', openHeight);
}
)
// with all set, close the accordions
accordions.addClass('accordion-open');
Drupal.behaviors.smoothAccordionCloseItems();
}
Drupal.behaviors.smoothAccordion = {
attach: function (context, settings) {
// close everything
var $accordions = $('.accordion-group');
$(window).load(function() {
Drupal.behaviors.smoothAccordionAddDataHeight($accordions);
$accordions.each(
function() {
Drupal.behaviors.listen_to_open($(this));
}
)
})
}
}
}(jQuery));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment