Почему при загрузке показывает все три блока?

Question

[Тимофей]

Написал простенький скрипт, при radio:checked должен показываться один из трех блоков ul, остальные спрятать, но при загрузке выводятся все три блока пока не кликнешь на одну из radio, подскажите что не так

https://codepen.io/gelvard/pen/aezVGp
на codeopen не работает вообще почему-то, но надеюсь суть вопроса понятна

Comments

[Михаил]

А на codepen нет jq

Answer 1

[Михаил]

Потому что функция вызывается только при изменении чекбокса, а не при загрузке страницы
Ответ в вопросе, с чего бы этой функции вызвваться если её никто не вызывает?

$(() => {
  showThis();
});

Comments

[Тимофей]

Подскажите, пжлст или направьте в правильном направлении, как это правильно реализовать, чтобы сразу прятал три блока и выводил тот, что checked? (первый сразу в этом положении находится)

[Михаил]

Что нужно:
Скрыть все 3, кроме того, который активный, именно это и делает функция, только она не вызывается

[Тимофей]

при скрытии/показе функция использует display: block/none, если я правильно понимаю, но они у меня flex и при этих манипуляциях верстка ломается

[Михаил]

fadeIn/fadeOut меняет opacity
fadeOut в конце ставит display: none