Skip to content

Instantly share code, notes, and snippets.

@telecran-telecrit
Forked from beardlessman/spoiler
Created July 22, 2024 20:37
Show Gist options
  • Save telecran-telecrit/36d58f01ee4fa6b18ad2078f2ac7a665 to your computer and use it in GitHub Desktop.
Save telecran-telecrit/36d58f01ee4fa6b18ad2078f2ac7a665 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