Javascript/jQuery问题：点击Accordion仅展开当前div而非全部

当前问题：点击任意.accordion元素时，所有.hidden-textarea都会被添加active-accordion类，导致所有面板同时展开。需要实现仅切换当前点击元素对应的面板，支持展开/收起的切换状态。

原HTML结构（无需修改） #

<div class="accordion-block">
<div class="container">
    <div class="gallery-wrap">
        <div class="item-accordion">
            <div class="accordion">
                    <div class="title text accordion-title">Title of Accordion</div>

                <div class="animation-container">
                    <div class="hidden-textarea active-accordion">
                        <div class="body text">Lorem Ipsum </div>
                        <div class="buttonArrayV1">Click Me</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

<div class="accordion-block">
<div class="container">
    <div class="gallery-wrap">
        <div class="item-accordion">
            <div class="roles-description accordion">
                    <div class="title text accordion-title">Title of Accordion</div>

                <div class="animation-container">
                    <div class="hidden-textarea active-accordion">
                        <div class="body text">Lorem Ipsum </div>
                        <div class="buttonArrayV1">Click Me</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

原CSS样式（无需修改） #

.active-accordion {
 display: block !important;
}

.hidden-textarea {
  display: none;
}

修改后的JS代码 #

TestJs.HorizontalAccordion.prototype.onResize = function() {
    // 先解绑旧的点击事件，避免重复绑定导致多次触发
    $('.accordion').off('click');
    
    $(window).resize(function() {
        const windowWidth = $(window).width();
        if (windowWidth < 1200) {
            $('.accordion').on("click", function(e) {
                e.preventDefault();
                e.stopPropagation();
                
                // 仅操作当前点击的.accordion内部的hidden-textarea
                $(this).find('.hidden-textarea').toggleClass('active-accordion');
                
                return false;
            });
        } else {
            // 屏幕宽度≥1200时，重置所有面板状态（可选，根据需求调整）
            $('.hidden-textarea').removeClass('active-accordion');
            // 解绑点击事件，避免大屏下触发交互
            $('.accordion').off('click');
        }
    }).trigger('resize'); // 初始化时触发一次resize，确保状态正确
};

关键改动说明 #

1. 上下文限定选择器：用$(this).find('.hidden-textarea')替代全局选择器，只操作当前点击元素内部的目标面板，避免影响其他面板。
2. 切换类实现交互：使用toggleClass替代addClass，点击一次添加类（展开）、再点击移除类（收起），实现切换效果。
3. 避免重复绑定：在resize事件前解绑旧的点击事件，防止多次触发resize导致同一元素绑定多个点击事件，造成逻辑混乱。
4. 初始化触发：添加.trigger('resize')，确保页面加载时就根据当前屏幕宽度应用正确的交互逻辑。

内容的提问来源于stack exchange，提问作者spidey677