Skip to content

Instantly share code, notes, and snippets.

@delphinpro
Created May 10, 2019 08:51
Show Gist options
  • Save delphinpro/f27c7f6efd3bd160d30a5cb00cb1f6f4 to your computer and use it in GitHub Desktop.
Save delphinpro/f27c7f6efd3bd160d30a5cb00cb1f6f4 to your computer and use it in GitHub Desktop.
Accordion jQuery plugin
<div class="accordion accordion_open">
<div class="accordion__header">
<div class="accordion__title">Заголовок</div>
<button class="accordion__toggle" type="button"><span class="sr-only">Открыть</span></button>
</div>
<div class="accordion__body">
<div class="accordion__content">
<p>Сайт рыбатекст поможет дизайнеру, верстальщику, вебмастеру сгенерировать
несколько абзацев более менее осмысленного текста рыбы на русском языке,
а начинающему оратору отточить навык публичных выступлений в домашних условиях.
При создании генератора мы использовали небезызвестный универсальный код речей.</p>
</div>
</div>
</div>
//==
//== Accordions
//== ======================================= ==//
(function () {
const classBlock = 'accordion';
const classBody = `${classBlock}__body`;
const classToggle = `${classBlock}__toggle`;
const classOpen = `${classBlock}_open`;
jQuery.fn.accordion = function () {
return this.each(function () {
const $el = $(this);
if (!!+$el.data('init')) return;
$el.data('init', 1);
const $body = $el.find(`.${classBody}`);
const $button = $el.find(`.${classToggle}`);
$button.on('click', function () {
if ($el.hasClass(classOpen)) {
$el.removeClass(classOpen);
$body.slideUp();
} else {
$el.addClass(classOpen);
$body.slideDown();
}
});
if ($el.hasClass(classOpen)) {
$body.slideDown();
}
});
};
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment