Получить полную высоту первых 3 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

Answer 1

Чтобы делать то, что вы хотите, вам не нужно использовать JavaScript, чтобы получить и установить высоты с панели. Предпочитайте использовать класс bootstrap и селектор css с javascript.

. Используйте селектор CSS nth-child(n+4), чтобы выбрать все панели с 4-й.

Добавить 'd-none' класс bootsrap (чтобы скрыть их)

$('div.panel:nth-child(n+4)').addClass('d-none');

Просто переключить отображение c

$('.loadmore_panels').click(function(){
$('.panel + .d-none').toggleClass('d-done d-block')
})

Вот мой рабочий пример: https://codepen.io/bZez/pen/povxMQo

$('div.panel:nth-child(n+4)').addClass('d-none');
$('.loadmore_panels').click(function(){
$('.panel + .d-none').toggleClass('d-done d-block')
})

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<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>