предлагаю вам рассмотреть следующий пример, надеюсь натолкнет на какие то мысли. Во всяком случае прошу поправить 2 момента: 1) во имя всех богов семантики умоляю вас не строить аккордеон на чекбоксах, 2) не используйте transition all.

в данный момент все происходит резко тк когда вы убираете max-height: 0; вы не задаете новое максимальное значение и браузер попросту присваивает значение max-height: none;. Значение none не является числовым и выполнить какие то математические операции с ним для плавной анимации браузеру не представляется возможным - как результат рывки. Во избежание этого, если у вас есть какоето понимание, что блок никогда не будет больше определенной высоты - установите ее в цсс, если же высота блоков абсолютно вариативна - лучше использовать JS анимации, Jquery предлагает ряд неплохих встроенных вариантов. Если не используется Jquery - всегда можно реализовать это нативно, но это уже совсем другая история...

Надеюсь данный ответ был вам полезен, хорошего дня.

вот есть примитивный пример, надеюсь будет полезно, дальше надо разбираться как подгружаются блоки и куда их надо потом прятать.