Допустим на нескольких страницах сайта есть повторяемый функционал в виде аккордеона, реализуемый с помощью jquery-функции slideToggle()
.
Ниже примерный код аккордеона:
https://jsfiddle.net/t8h1ajom/5/
var $block = $('.block');
$block.on('click', function(e){
var $title = $(e.target).closest('.block__title'),
$content = $title.next();
$content.slideToggle(500);
})
.block{
position: relative;
}
.block__title{
border: 1px solid #000;
padding: 10px;
cursor: pointer;
}
.block__content{
display: none;
border: 1px solid #000;
padding: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block">
<div class="block__title">
title
</div>
<div class="block__content">
content
<div class="element">some element</span>
</div>
</div>
т.е. допустим на других страницах нужен такой-же аккордеон, но плюс ещё нужно сделать дополнительные манипуляции с элементами аккордеона.
Интересует объектно-ориентированный вариант, благодаря которому можно было бы легко добавлять новый функционал в уже существующий.
Как нужно переписать существующий js-код о объектно-ориентированный?
Может быть как-то реализовать в виде jquery-плагина?
Очень надеюсь на помощь от знающих людей