Скрыть div по id

Есть необходимость логически все связать и описать зависимость имен id и связанных с ними групп элементов. Так же надо выбрать алгоритм скрытия/отображения. Вот что-то вроде базового варианта.

Управление
У вас есть управляющие элементы от которых вы берете состояние и на которые весите прослушивание событий. Если два верхних элемента в вашем примере чекбоксы (тег div у чекбокса заменить на input) то состояние лучше взять через checked.

Отображение
Есть элементы для отображения информации - показывать/скрывать их удобно через класс active. В CSS прописываете соответствующие свойства (display block/none иди visibility hidden/visible). Элемент с классом 'active' - показываем, без класса скрываем.

По событию onClick на чекбоксе по выбранному алгоритму на элементы отображения функция добавляет класс 'active' или убирает его. Для этого можно использовать:

element.classList.add('active')
element.classList.remove('active')
element.classList.toggle('active')

В примеры скрытия/отображения добавил чекбоксы: https://codepen.io/ilya-lokalin/pen/qBBgWjB

Алгоритм
Вам необходимо решить что будет происходить по событию и сделать набросок последовательности возможных событий:



- событие onClick скрывает/показывает логически связанные элементы (как на рисунке выше) - каждый чекбокс работает как переключатель для своей группы элементов;



- одна группа скрывается, другая отображается - тут подойдет настройка инпутов как радиокнопок. Во включенном состоянии может быть только одна группа элементов.

Важно.

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

И если есть возможность избежать использование ID, лучше их не использовать. События можно повесить на классы, отображать тоже по состоянию классов.