Created
May 10, 2019 08:51
-
-
Save delphinpro/f27c7f6efd3bd160d30a5cb00cb1f6f4 to your computer and use it in GitHub Desktop.
Accordion jQuery plugin
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//== | |
//== 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