Stay_Strong,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.loadContainer{
display: none;
}
.loadContainer.active{
display: block;
}
</style>
<script>
if (!Object.assign) {
Object.defineProperty(Object, 'assign', {
enumerable: false,
configurable: true,
writable: true,
value: function(target, firstSource) {
'use strict';
if (target === undefined || target === null) {
throw new TypeError('Cannot convert first argument to object');
}
var to = Object(target);
for (var i = 1; i < arguments.length; i++) {
var nextSource = arguments[i];
if (nextSource === undefined || nextSource === null) {
continue;
}
var keysArray = Object.keys(Object(nextSource));
for (var nextIndex = 0, len = keysArray.length; nextIndex < len; nextIndex++) {
var nextKey = keysArray[nextIndex];
var desc = Object.getOwnPropertyDescriptor(nextSource, nextKey);
if (desc !== undefined && desc.enumerable) {
to[nextKey] = nextSource[nextKey];
}
}
}
return to;
}
});
}
window.addEventListener("DOMContentLoaded", function() {
function wrap(create, elms, all) {
function fn(item, i) {
var to = all || i == len - 1 ? create : create.cloneNode(true);
item = item.parentNode.replaceChild(to, item);
to.appendChild(item)
}
var len = elms.length;
len ? [].forEach.call(elms, fn) : fn(elms)
}
var defaults = {
"childrenElements": ".filter__option",
"count": "3",
"speed": "250",
"textMore": "+ Показать все",
"textLess": "- Скрыть"
};
window.LoadElements = function LoadElements(elements, options) {
if (!(this instanceof LoadElements)) return new LoadElements(elements, options);
this.options = Object.assign({}, defaults, options);
this.elements = typeof elements === "string" ? document.querySelectorAll(elements) :
elements.length ? elements : [elements];
this.init()
};
LoadElements.prototype.init = function() {
var self = this;
[].forEach.call(self.elements, function(el) {
var countChildren = el.querySelectorAll(self.options.childrenElements);
countChildren = [].slice.call(countChildren, self.options.count);
if (countChildren.length) {
var container = document.createElement("div");
container.className = "loadContainer";
wrap(container, countChildren, true);
var showAll = document.createElement("div");
showAll.className = "loadMore";
showAll.innerHTML = self.options.textMore;
showAll.addEventListener("click", function() {
container.classList.toggle("active");
showAll.innerHTML = container.classList.contains("active") ? self.options.textLess : self.options.textMore
});
container.parentNode.insertBefore(showAll, container.nextSibling)
}
})
};
LoadElements(".filter__item")
});
</script>
</head>
<body>
<div class="filter__wrapper">
<form action="" class="filter">
<div class="filter__item">
<div class="filter__name">Производители</div>
<div class="filter__option--wrapper">
<div class="filter__option">
<input id="check1" type="checkbox"/>
<label for="check1">ACV</label>
</div>
<div class="filter__option">
<input id="check2" type="checkbox"/>
<label for="check2">AE&T</label>
</div>
<div class="filter__option">
<input id="check3" type="checkbox"/>
<label for="check3">Ariston</label>
</div>
<div class="filter__option">
<input id="check4" type="checkbox"/>
<label for="check4">Armada</label>
</div>
<div class="filter__option">
<input id="check5" type="checkbox"/>
<label for="check5">Baxi</label>
</div>
<div class="filter__option">
<input id="check6" type="checkbox"/>
<label for="check6">Buderus</label>
</div>
<div class="filter__option">
<input id="check7" type="checkbox"/>
<label for="check7">Chaffoteaux</label>
</div>
<div class="filter__option">
<input id="check8" type="checkbox"/>
<label for="check8">Matrix</label>
</div>
<div class="filter__option">
<input id="check9" type="checkbox"/>
<label for="check9">MATRIX</label>
</div>
</div>
</div>
<div class="filter__item">
<div class="filter__name">Производители</div>
<div class="filter__option--wrapper">
<div class="filter__option">
<input id="check1" type="checkbox"/>
<label for="check1">ACV</label>
</div>
<div class="filter__option">
<input id="check2" type="checkbox"/>
<label for="check2">AE&T</label>
</div>
<div class="filter__option">
<input id="check3" type="checkbox"/>
<label for="check3">Ariston</label>
</div>
<div class="filter__option">
<input id="check4" type="checkbox"/>
<label for="check4">Armada</label>
</div>
<div class="filter__option">
<input id="check5" type="checkbox"/>
<label for="check5">Baxi</label>
</div>
<div class="filter__option">
<input id="check6" type="checkbox"/>
<label for="check6">Buderus</label>
</div>
<div class="filter__option">
<input id="check7" type="checkbox"/>
<label for="check7">Chaffoteaux</label>
</div>
<div class="filter__option">
<input id="check8" type="checkbox"/>
<label for="check8">Matrix</label>
</div>
<div class="filter__option">
<input id="check9" type="checkbox"/>
<label for="check9">MATRIX</label>
</div>
</div>
</div>
</form>
</div>
</body>
</html>