Slide down/up section with images doesn't work properly

I have a Twig field type called Imagelist (from Bolt CMS), which I modified to output 4 fine-grouped images per line on all kinds of screens except extra small and 1 image per line on extra small screens. Then I also decided to implement animation, so that only the first line with images is displayed by default and you can unfold other images with them sliding down and then up when folded back. I was able to make them appear and disappear when needed, but I can't get the animation to work. First I tried doing it with just CSS3, then I gave up and found some JS code, which I also tried, but it won't work properly in conjunction with my other code. When you first click on "Show extra images", the extra images unfold, but then one line of them folds back. When you hide them and then click on that again, it works properly, until page is refreshed with extra images hidden. Then the first time is messy again. And there's no backwards animation when hiding extra images, while I need that too.

I'm posting a link to jsfiddle with html output of my page, my whole CSS, and the respective JS code. Stackoveflow won't let me post this large of a snippet. And here I'm including a piece of my Twig code that is involved in the whole matter (all logic from it is crucial).

http://jsfiddle.net/COOLak/be86d5xu/6/

{% block imagelist_field %}
<div class="imagelist columns">
    {% for image in value %}
        {% if loop.index0 is divisibleby(4) %}
            <input class="hide" id="imagelist" type="checkbox">
            <div class="section-imagelist">
        {% endif %}
        {% if value|length < 4 %}
            <div class="below4">
        {% endif %}         
        <div>
            {{ popup(image.filename, 320, 240) }}
        </div>
        {% if loop.index is divisibleby(4) or loop.last %}
            </div>
        {% endif %}
        {% if value|length < 4 %}
            </div>
        {% endif %}
        {% if value|length > 4 %}
        <label for="imagelist">
        <span class="icon">
            <i class="fas fa-angle-double-down"></i><i class="fas fa-angle-double-up"></i>
        </span>
        <div class="unfold">Show extra images</div>
        <div class="fold">Hide extra images</div>
        </label>
        {% endif %}
    {% endfor %}    
</div>
{% endblock %}

Since I'm not a programmer/web designer and just building a fan site, I'm having a heck of a hard time making this work properly. I spent countless time trying to understand what is wrong with my code to no avail. Sorry for posting this much code, but this can't be solved by asking some general questions. I don't even know where the mistake is: whether it's in CSS, Twig, or JS. It's just something is not right. I humbly ask to help me either fix this as is or perhaps propose your own solution with CSS only. It doesn't really matter. Any help is greatly appreciated.