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