Раскрывающийся список тегов

Особенности

  1. Раскрытие по кнопке "показать еще"
JS
Код
      const tagOffers = (function () {
    let toggleExpand = '';
    let toggle = '';
    let enabled = false;
    return {
        init: function() {
            this.start();
        },
        start: function() {
            const fields = document.querySelectorAll('.field-tag-offers');
            if (fields.length) {
                // if (window.screen.width > 768) {
                    fields.forEach(field => {
                        enabled = true;
                        let values = field.querySelector('.values');

                        if (values.getBoundingClientRect().height > field.getBoundingClientRect().height - parseInt(getComputedStyle(field).paddingTop) - parseInt(getComputedStyle(field).paddingBottom)) {
                        // if (values.getBoundingClientRect().height + parseInt(getComputedStyle(values).marginBottom) > field.getBoundingClientRect().height) {
                            this.createToggleExpand();
                            this.createToggle();
                            this.insertToggleExpand(values);
                            toggleExpand.querySelector('a').addEventListener('click', e => {
                                e.preventDefault();
                                this.insertToggle(values);
                                field.classList.remove('is_collapsed');
                                toggleExpand.remove();
                            });
                            toggle.querySelector('a').addEventListener('click', e => {
                                e.preventDefault();
                                this.insertToggleExpand(values);
                                field.classList.add('is_collapsed');
                                toggle.remove();
                            });
                        }
                    });
                // }
                this.resize();
            }
        },
        createToggleExpand: function () {
            toggleExpand = createElement("div", ['value', 'value-toggle', 'value-toggle_expand']);
            toggleExpand.append(createElement("a", [], {
                href: '#',
                textContent: 'Еще подборки',
            }));
        },
        createToggle: function () {
            toggle = createElement("div", ['value', 'value-toggle', 'value-toggle_collapse']);
            toggle.append(createElement("a", [], {
                href: '#',
                textContent: 'Свернуть',
            }));
        },
        insertToggleExpand: function (values) {
            values.prepend(toggleExpand);
        },
        insertToggle: function (values) {
            values.append(toggle);
        },
        resize: function () {
            window.addEventListener('resize', e => {
                // if (window.screen.width > 768) {
                //     !enabled && this.start();
                // } else {
                //     if (enabled) {
                //         enabled = false;
                //         toggleExpand ? toggleExpand.remove() : null;
                //         toggle ? toggle.remove() : null;
                //     }
                // }
            });
        },

    }
})();

tagOffers.init();