Solution 1 :

To do what you want, you dont need use JavaScript to get et set heights from panel.
Prefer use the power of bootstrap classes and a css selector with javascript.

Use CSS nth-child(n+4) selector to select all panel from 4th.

Add 'd-none' bootsrap’s class (to hide them)

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

Simply toggle display c

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

Here’s my working example:
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>

Problem :

I have Bootstrap 4 accordion and need to display only first 3 elements. In result, the parent element .panel-list should have the full height of this three elements, also if some .panel is clicked and reveal .collapse child element with its height (this height is not added to total height of .panel element):

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();
});

This works fine, but it’s not adding the height of .collapse to .panel, when .panel is clicked.

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

Comments

Comment posted by codepen.io/bZez/pen/povxMQo?editors=0010

codepen.io/bZez/pen/povxMQo?editors=0010

Comment posted by Juraj

Yes, perfect! It works 🙂 Make this please as answer, so I can accept and rate it.

Comment posted by bZezzz

It’s Done Juraj.

By