Как правильно удерживать контейнер вне потока до тех пор, пока не будет нажата кнопка, чтобы отобразить этот контейнер? ⇐ CSS

[Anonymous]

Мне сложно удерживать контейнеры вне потока, пока я не нажму кнопку, чтобы показать их. Возможно, это фундаментальная вещь. В этом примере, когда я нажимаю на любую категорию: МУЖЧИНЫ, ЖЕНЩИНЫ, ДЕТИ, я показываю 5 ссылок и svg, но я хочу иметь переход для плавности. Проблема в том, что я использую display none, и переходы не работают с описанием изображения displayenter здесь.
В следующем примере я собираюсь показать код для ссылок для простоты. поэтому subgenderman, subgenderwomen, subgenderkids являются ul для ссылок и не отображаются, пока не установлен флажок man,women,kids, отображение будет гибким.

• WOMEN
• MEN
• KIDS

• TrendingM
• ClothingM
• AccesoriesM
• ShoesM
• SportM

• TrendingW
• ClothingW
• AccesoriesW
• ShoesW
• SportW

• TrendingK
• ClothingK
• AccesoriesK
• ShoesK
• SportK

.subgenderman , .subgenderwomen , .subgenderkids{
transition: 2s;
display: none;
}

/* Show subgender when the 'men/women/kids' radio button is selected */
#men:checked ~ .subgenderman, #women:checked ~ .subgenderwomen, #kids:checked ~ .subgenderkids{
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
padding-top: 3rem;
align-self: center;
}


Подробнее здесь: https://stackoverflow.com/questions/790 ... ng-a-butto