Skip to content

Instantly share code, notes, and snippets.

@beardlessman
Created July 13, 2017 08:54
Show Gist options
  • Save beardlessman/54ec44df5f4eab5c07f9fe3cc20064e1 to your computer and use it in GitHub Desktop.
Save beardlessman/54ec44df5f4eab5c07f9fe3cc20064e1 to your computer and use it in GitHub Desktop.
Spoiler [like jquery-ui accordion(no)]
//js
$('.j-spoiler').each(function(){
new Spoiler(this);
});
Spoiler = function(container) {
this.container = $(container);
this.head = this.container.find('.j-spoiler-head');
this.body = this.container.find('.j-spoiler-body');
this.close = this.container.find('.j-spoiler-close');
this.init();
};
Spoiler.prototype.init = function() {
var cmp = this;
cmp.body.hide();
cmp.head.on('click', function(e){
e.preventDefault();
var target = $(e.target);
$(this).toggleClass('active');
cmp.body.toggle();
});
cmp.close.on('click', function(e){
e.preventDefault();
cmp.body.toggle();
cmp.head.toggleClass('active');
});
};
// html
<div class="spoiler j-spoiler">
<a href="#" class="j-spoiler-head spoiler--head">Показать</a>
<div class="j-spoiler-body spoiler--body" style="display: none;">
<a href="#" class="j-spoiler-close spoiler--close">Скрыть</a>
<p>Контент</p>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment