accordion.js

;(function() {
    const baseToggle = (target, fn = () => {}) => {
        let button = target.closest('[data-tggl-button]')
        if (!button) return
        
        let hideClass = button.getAttribute('data-tggl-button') || 'hide'
        let parent = button.closest('[data-tggl-parent]')
        if (!parent) return
        
        let items = parent.querySelectorAll('[data-tggl-item]')
        let item = button.closest('[data-tggl-item]')
        if (!item) return
        
        items.forEach(el => {
            let wrap = el.querySelector('[data-tggl-wrap]') 
            let list = el.querySelector('[data-tggl-list]')
            let height = wrap ? wrap.clientHeight : -1
            if (height >= 0 && list) {
                list.style.height = height + 'px'
            }
        })
        const resetHeight = () => {
            setTimeout(() => {
                items.forEach(el => {
                    let list = el.querySelector('[data-tggl-list]')
                    list.style.height = null
                })
            }, 300)
        }
        setTimeout(fn, 16, { button, hideClass, parent, items, item, resetHeight })
    }

    const toggleAllHide = ({ target }) => {
        baseToggle(target, ({ items, item, hideClass, resetHeight }) => {
            item.classList.toggle(hideClass)
            items.forEach(elem => {
                if (elem !== item) {
                    elem.classList.add(hideClass)
                }
            })
            resetHeight()
        })
    }

    const toggle = ({ target }) => {
        baseToggle(target, ({ item, hideClass, resetHeight }) => {
            item.classList.toggle(hideClass)
            resetHeight()
        })
    }

    window['accord'] = { toggleAllHide, toggle }
})()

servlist.html

<div class="servlist" data-tggl-parent>
    <div class="servlist__sec" data-tggl-item>
        <div class="servlist__head">
            <span>Место под палатку</span>
            <button type="button" data-tggl-button="hideList" onclick="window.accord.toggleAllHide(event)">
                <svg fill="currentColor"><use xlink:href="#icon-arr"></use></svg>
            </button>
        </div>
        <div class="servlist__items" data-tggl-list>
            <div class="servlist__wrap" data-tggl-wrap>
                <div class="servlist__item">
                    <div class="servlist__name">NAME #1</div>
                    <div class="servlist__price">PRICE</div>
                    <div class="servlist__desc">DESC</div>
                </div>
            </div>
        </div>
    </div>
    <div class="servlist__sec" data-tggl-item>
        <div class="servlist__head">
            <span>Место под палатку</span>
            <button type="button" data-tggl-button="hideList" onclick="window.accord.toggleAllHide(event)">
                <svg fill="currentColor"><use xlink:href="#icon-arr"></use></svg>
            </button>
        </div>
        <div class="servlist__items" data-tggl-list>
            <div class="servlist__wrap" data-tggl-wrap>
                <div class="servlist__item">
                    <div class="servlist__name">NAME #1</div>
                    <div class="servlist__price">PRICE</div>
                    <div class="servlist__desc">DESC</div>
                </div>
                <div class="servlist__item">
                    <div class="servlist__name">NAME #2</div>
                    <div class="servlist__price">PRICE</div>
                    <div class="servlist__desc">DESC</div>
                </div>
            </div>
        </div>
    </div>
</div>