Скольжение вниз / вверх с изображениями не работает должным образом

Question

У меня есть тип поля Twig, называемый Imagelist (из Bolt CMS), который я изменил, чтобы выводить 4 тонко сгруппированных изображения в строке на всех видах экранов, кроме очень маленьких и 1 изображение в строке на очень маленьких экранах.Затем я также решил реализовать анимацию, чтобы по умолчанию отображалась только первая строка с изображениями, и вы можете развернуть другие изображения, сдвинув их вниз, а затем вверх при сложении назад.Я смог заставить их появляться и исчезать при необходимости, но не могу заставить анимацию работать.Сначала я попытался сделать это только с помощью CSS3, затем я сдался и нашел некоторый код JS, который я тоже попробовал, но он не будет работать должным образом в сочетании с другим моим кодом.Когда вы впервые нажимаете «Показать дополнительные изображения», дополнительные изображения разворачиваются, но затем одна строка из них складывается назад.Когда вы скрываете их, а затем нажимаете на них снова, они работают должным образом, пока страница не обновится, а дополнительные изображения будут скрыты.Тогда первый раз снова грязный.И нет никакой обратной анимации при скрытии дополнительных изображений, хотя мне это тоже нужно.

Я публикую ссылку на jsfiddle с выводом html моей страницы, всего моего CSS и соответствующего кода JS.Stackoveflow не позволит мне опубликовать этот большой фрагмент кода.И здесь я включаю часть своего кода Twig, который задействован во всем этом деле (вся логика из него имеет решающее значение).

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 %}

Так как яЯ не программист и не веб-дизайнер, а просто создаю фан-сайт. У меня чертовски непросто заставить эту работу работать правильно.Я потратил бесчисленное количество времени, пытаясь понять, что не так с моим кодом, но безрезультатно.Извините за публикацию такого большого количества кода, но это не может быть решено, задавая некоторые общие вопросы.Я даже не знаю, где ошибка: в CSS, Twig или JS.Это просто что-то не так.Я смиренно прошу помочь мне либо исправить это как есть, либо предложить ваше собственное решение только с помощью CSS.Это не имеет большого значения.Любая помощь с благодарностью.