Спойлер в иконках bootstrap

[nulledpapa]

Добрый день друзья! помогите дернуть код спойлера фильтра с сайта ниже;

Мне надо внедрить на другой сайт не могу выдернуть код js + html который отвечает за правильную работу.

 

[wiggly]

Код JS здесь --- Для просмотра ссылки Войди или Зарегистрируйся

Спойлер

Работа такова.
Кликаем на h3 у него меняется класс, из-за чего меняется иконка минуса на плюс.
Ну а блок, который указан в дата-таргет h3, скрывается путем присвоения и анимации height:0;

p/s/ Учите js/css анимации. И тогда не обязательно будет "дергать код", а можно будет писать самому.

 

[grave_bird]

Код JS здесь --- Для просмотра ссылки Войди или Зарегистрируйся

Столько кода для одного коллапса?

Для просмотра ссылки Войди или Зарегистрируйся
Вот как это можно сделать на бутстрапе используя события: Для просмотра ссылки Войди или Зарегистрируйся
Есть 2 события, с помощью которых можно изменить класс элемента (или вообще что угодно) при открытии коллапса.
Бутстрап давно решил большинство подобных задач.
Но если нужен конкретно тот, то вот код с сайта mvideo:

Спойлер

Код модуля:

{
            constructor: function(a, b) {
                this.config = {
                    selectors: {
                        items: ">li"
                    },
                    states: ["collapsed", "expanded"],
                    showQty: 5
                }, this.$ = {}, this.$.holder = $(a), $.extend(!0, this.config, b || {}), this.loadObjects(this.$.holder), this.initialize(), this.bindEvents()
            },
            initialize: function() {
                this.link = new mvideo.Class.DynamicTextElement(this.$.holder, "after", {
                    text: {
                        show: '+ <span class="expandable-list-text">Развернуть</span>',
                        hide: '- <span class="expandable-list-text">Свернуть</span>'
                    },
                    tag: "a",
                    attributes: {
                        href: "#",
                        "class": "expandable-list-link pull-right"
                    }
                }), this.link.$.el.before("<!--noindex-->").after("<!--/noindex-->"), this.reinit()
            },
            reinit: function() {
                if (this.hasExtraItems()) {
                    this.$.holder.removeClass("transition"), $.data(this.$.holder[0], "collapsed-height", this.getCollapsedHeight()), $.data(this.$.holder[0], "expanded-height", this.getExpandedHeight()), this.collapse();
                    var a = this;
                    setTimeout(function() {
                        a.$.holder.addClass("transition")
                    }, 0)
                } else this.link.detach();
                return this
            },
            collapse: function() {
                var a = $.data(this.$.holder[0], "collapsed-height");
                this.$.holder.height(a), this.setState("collapsed"), this.link.changeText("show")
            },
            expand: function() {
                var a = $.data(this.$.holder[0], "expanded-height");
                this.$.holder.height(a), this.setState("expanded"), this.link.changeText("hide")
            },
            getCollapsedHeight: function() {
                var a = this.$.items.eq(this.config.showQty - 1),
                    b = a.position().top,
                    c = a.parent().position().top,
                    d = a.outerHeight(!0);
                return b - c + d
            },
            getExpandedHeight: function() {
                var a, b = this.$.holder.height();
                return this.$.holder.height("auto"), a = this.$.holder.height(), this.$.holder.height(b), a
            },
            hasExtraItems: function() {
                return this.$.items.length > this.config.showQty
            },
            bindEvents: function() {
                var a = this;
                this.link.watchFor("click", function(b) {
                    b.preventDefault(), a.isState("expanded") ? a.collapse() : a.expand()
                })
            }
        }

А вот как навешивают события

{
            constructor: function b(a, c) {
                return b.instance ? ($.extend(!0, b.instance.config, c), b.instance.initialize(), b.instance) : (b.instance = this, this.config = {
                    enable: !1,
                    duration: 200,
                    selectors: {
                        container: ".facet-section-wrapper",
                        stickyItem: ".sticky-result-holder",
                        targetItem: ".js-close-facet",
                        qtyItem: ".search-results-heading-qty"
                    }
                }, mvideo.observer(this), $.extend(!0, this.config, c), this.strPattern = $(this.config.selectors.stickyItem).find(".close-facet-btn").text(), this.enabled = !1, this.$ = {
                    holder: a instanceof jQuery ? a : $(a),
                    container: $(this.config.selectors.container)
                }, void this.initialize())
            },
            initialize: function() {
                this.qty = +$(this.config.selectors.qtyItem).text().replace(/\D+/g, ""), "desktop" !== mvideo.device.manager.getType() && this.config.enable && (this.enable(), this.publish("facet:stickyItemUpdate", {
                    stickyItem: this
                }, this._stickyHandler))
            },
            enable: function() {
                this.enabled || (this.config.enable = !0, this._bindEvents(), this._updateUI(), this.enabled = !0)
            },
            disable: function() {
                this.enabled && (this.config.enable = !1, this._unBindEvents(), this.enabled = !1)
            },
            isVisible: function(a) {
                return (a || $(this.config.selectors.stickyItem)).is(":visible")
            },
            hide: function(a) {
                var b = $(this.config.selectors.stickyItem);
                this.isVisible(b) && b.slideUp("undefined" == typeof a ? this.config.duration : a)
            },
            show: function(a) {
                var b = $(this.config.selectors.stickyItem);
                this.isVisible(b) || b.slideDown("undefined" == typeof a ? this.config.duration : a)
            },
            _updateUI: function() {
                var a = this.strPattern.replace(/\{\{qty\}\}/g, this.qty);
                $(this.config.selectors.stickyItem).css("display", "none").removeClass("hidden").find(".close-facet-btn").text(a), $(this.config.selectors.targetItem).find(".close-facet-btn").removeClass("btn-invers-deep-grey").text(a)
            },
            _stickyHandler: function(a) {
                var b, c, d = a.data && a.data.stickyItem ? a.data.stickyItem : this,
                    e = $(d.config.selectors.targetItem),
                    f = mvideo.instance.page.page.sidebar.isVisible();
                b = Array.prototype.some.call(e, mvideo.helpers.inViewport.bind(this)), c = e.last().offset().top <= $(document).scrollTop(), b || c || !f ? d.hide() : d.show()
            },
            _bindEvents: function() {
                this.enabled || (this.$.container.on("scroll", {
                    stickyItem: this
                }, this._stickyHandler), this.subscribe("facet:stickyItemUpdate", {
                    stickyItem: this
                }, this._stickyHandler), this.$.holder.find(".collapse").on("shown.bs.collapse hidden.bs.collapse", {
                    stickyItem: this
                }, this._stickyHandler))
            },
            _unBindEvents: function() {
                this.enabled && (this.$.container.off("scroll", this._stickyHandler), this.unsubscribe("facet:stickyItemUpdate", this._stickyHandler), this.$.holder.find(".collapse").off("shown.bs.collapse hidden.bs.collapse", this._stickyHandler))
            }
        }