Skip to content

Instantly share code, notes, and snippets.

@tkdn
Last active August 29, 2015 14:16
Show Gist options
  • Save tkdn/05683e635ef7077b6a7e to your computer and use it in GitHub Desktop.
Save tkdn/05683e635ef7077b6a7e to your computer and use it in GitHub Desktop.
jQuery その先のUIアニメーション ref: http://qiita.com/tkdn/items/fc8425605bdbcfc3f893
$(function() {
var action = (function(jqObject) {
var content = jqObject.next('.content');
var contentParent = content.parent();
if(contentParent.hasClass('active')){
content.slideUp('250',function(){
contentParent.removeClass('active');
});
} else {
contentParent.addClass('active');
content.slideDown('250');
}
});
$('.jq-accordion').on('click', function(event) {
event.preventDefault();
action($(this));
});
});
var Velocity = require('velocity-animate');
document.addEventListener('DOMContentLoaded', function(event) {
var accodionContents = this.querySelectorAll('.js-accordion + .content');
for (var i = 0; i < accodionContents.length; i++) {
var height = accodionContents[i].offsetHeight;
accodionContents[i].setAttribute('data-height', height);
accodionContents[i].style.height = 0;
}
var action = (function(elemObject){
var content = elemObject.nextElementSibling;
var contentParent = elemObject.parentElement;
var contentHeight = content.getAttribute('data-height');
if(contentParent.classList.contains('active')){
contentParent.classList.remove('active');
Velocity(content, { height: 0 }, 250);
} else {
contentParent.classList.add('active');
Velocity(content, { height: contentHeight }, 250);
}
});
var actionElem = this.querySelectorAll('.js-accordion');
for (var i = 0; i < actionElem.length; i++) {
actionElem[i].addEventListener('click',function(event){
event.preventDefault();
action(this);
});
}
});
Velocity(elem, { height: 'auto' }, 250);
var accodionContents = this.querySelectorAll('.js-accordion + .content');
for (var i = 0; i < accodionContents.length; i++) {
var height = accodionContents[i].offsetHeight;
accodionContents[i].setAttribute('data-height', height);
accodionContents[i].style.height = 0;
}
document.querySelectorAll('.js-accordion').addEventListener('click',function(){
...
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment