折叠数量可变的包含子元素的元素

Question

我有一个显示短篇小说的网络应用，并为该短篇小说的每一章提供了文字摘要。

包含故事的元素可在“故事”类的父div内排序。 此外，包含章节摘要的元素也可以在“章节”类的父div内进行排序。

此排序是使用jQuery插件完成的。

但是，我想添加一个react，vue甚至jQuery插件，该插件允许每本书的父元素可折叠。

我确实尝试过jQuery手风琴，但是在任何给定时间只能打开一个元素。

然后，我尝试了一个名为react-sortable-hoc的反应库，该库位于https://github.com/clauderic/react-sortable-hoc

但是，在实施时，破坏了我的故事和章节摘要的排序能力。

所以我想知道是否有人可以推荐一个可以折叠包含子元素的动态元素的库/组件。

以下是我的HTML外观的示例：

<div class="stories sortable">

    <div class="storySummary"> 
        <div class="card">
            <div class="card-header shortStoryTitle collapsable">To Build a Fire</div>    <!-- desired functionality: collapse when clicked -->
            <div>
                <div class="chapters sortable">
                    <div class="chapterSummary">
                        Chapter Summary Text for Chapter #1
                    </div>
                    <div class="chapterSummary">
                        Chapter Summary Text for Chapter #2
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="storySummary">
        <div class="card">
            <div class="card-header shortStoryTitle collapsable">An Occurrence at Owl Creek Bridge</div> <!-- desired functionality: collapse when clicked -->
            <div>
                <div class="chapters sortable">
                    <div class="chapterSummary">
                        Chapter Summary Text for Chapter #1
                    </div>
                    <div class="chapterSummary">
                        Chapter Summary Text for Chapter #2
                    </div>                  
                </div>
            </div>
        </div>
    </div>  

    <div class="storySummary">
        <div class="card">
            <div class="card-header shortStoryTitle collapsable">A Horseman in the Sky</div> <!-- desired functionality: collapse when clicked -->
            <div>
                <div class="chapters sortable">
                    <div class="chapterSummary">
                        Chapter Summary Text for Chapter #1
                    </div>
                    <div class="chapterSummary">
                        Chapter Summary Text for Chapter #2
                    </div>                  
                </div>
            </div>
        </div>
    </div>

</div>