获得手风琴中前三个HTML元素的完整高度

Question

我有Bootstrap 4手风琴，只需要显示前3个元素。结果，父元素.panel-list应该具有这三个元素的完整高度，也要单击某些.panel并显示其高度为.collapse子元素（此高度不会添加到.panel的总高度中）元素）：

var count = 0;

$('.panel-list .panel:lt(3)').each(function() 
       count += $(this).height(); 
);

$('.panel-list').css('height' : count, 'transition' : '.25s', 'overflow' : 'hidden');

$('.loadmore_panels').on('click', function() 
    $('.panel-list')
        .attr('id', 'definitive')
        .css('height' : 'auto', 'overflow-y' : 'visible');
    $(this).hide();
);

这很好，但是当单击.collapse时，它没有将.panel的高度添加到.panel。

HTML

<div id="panely" class="accordion">             
    <div class="panel-list">
        <div class="panel panel-1">
            <div id="heading-1" class="panel-heading">
                <button class="btn w-100 text-left" type="button" data-toggle="collapse" data-target="#collapse-1" aria-expanded="true" aria-controls="collapse-1">
                Question 1
                </button>
            </div>
            <div id="collapse-1" class="collapse" aria-labelledby="heading-1" data-parent="#panely">
                <div class="a py-4">
                    Answer 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam et sem quis felis porta egestas eget non leo.
                    <div class="d-flex align-items-center pt-4">
                        <a href="https://example.com/services#show-projects">Case studies</a>
                        <a href="https://example.com/contact#formular">Contact</a>                              
                    </div>
                </div>
            </div>
        </div>

        <div class="panel panel-2">
            <div id="heading-2" class="panel-heading">
                <button class="btn w-100 text-left" type="button" data-toggle="collapse" data-target="#collapse-2" aria-expanded="true" aria-controls="collapse-2">
                Question 2
                </button>
            </div>
            <div id="collapse-2" class="collapse" aria-labelledby="heading-2" data-parent="#panely">
                <div class="a py-4">
                    answer 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam et sem quis felis porta egestas eget non leo.
                    <div class="d-flex align-items-center pt-4">
                        <a href="https://example.com/services#show-projects">Case studies</a>
                        <a href="https://example.com/contact#formular">Contact</a>                              
                    </div>
                </div>
            </div>
        </div>

        <div class="panel panel-3">
            <div id="heading-3" class="panel-heading">
                <button class="btn w-100 text-left" type="button" data-toggle="collapse" data-target="#collapse-3" aria-expanded="true" aria-controls="collapse-3">
                Question 3
                </button>
            </div>
            <div id="collapse-3" class="collapse" aria-labelledby="heading-3" data-parent="#panely">
                <div class="a py-4">
                    Answer 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam et sem quis felis porta egestas eget non leo.
                    <div class="d-flex align-items-center pt-4">
                        <a href="https://example.com/services#show-projects">Case studies</a>
                        <a href="https://example.com/contact#formular">Contact</a>                              
                    </div>
                </div>
            </div>
        </div>

        <div class="panel panel-4">
            <div id="heading-4" class="panel-heading">
                <button class="btn w-100 text-left" type="button" data-toggle="collapse" data-target="#collapse-4" aria-expanded="true" aria-controls="collapse-4">
                Question 4
                </button>
            </div>
            <div id="collapse-4" class="collapse" aria-labelledby="heading-4" data-parent="#panely">
                <div class="a py-4">
                    answer 4 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam et sem quis felis porta egestas eget non leo.
                    <div class="d-flex align-items-center pt-4">
                        <a href="https://example.com/services#show-projects">Case studies</a>
                        <a href="https://example.com/contact#formular">Contact</a>                              
                    </div>
                </div>
            </div>
        </div>

        <div class="panel panel-5">
            <div id="heading-5" class="panel-heading">
                <button class="btn w-100 text-left" type="button" data-toggle="collapse" data-target="#collapse-5" aria-expanded="true" aria-controls="collapse-5">
                Question 5
                </button>
            </div>
            <div id="collapse-5" class="collapse" aria-labelledby="heading-5" data-parent="#panely">
                <div class="a py-4">
                    answer 5 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam et sem quis felis porta egestas eget non leo.
                    <div class="d-flex align-items-center pt-4">
                        <a href="https://example.com/services#show-projects">Case studies</a>
                        <a href="https://example.com/contact#formular">Contact</a>                              
                    </div>
                </div>
            </div>
        </div>
    </div>          
</div>

<div class="loadmore_panels btn btn-primary">Show more</div>

CODEPEN https://codepen.io/trueweb/pen/MWYPNyd?editors=1010