Html – What is the correct way to keep container out of the flow until clicking a button to show that container?

I am struggling with keeping containers out of the flow until i click a button to show them. Maybe its a fundamental thing . In this example , when i click on any of the category of : MEN , WOMEN , KIDS , im displaying 5 links and an svg , but i want to have a transition for smoothness. The problem is that im using display none and transitions dont work with displayenter image description here

In the following example , I am going to show the code for the links for simplicity. so the subgenderman, subgenderwomen, subgenderkids are the ul for the links and is displayed to none , until the man,women,kids is checked , the display will be flex .

<ul class="gendersection">
                        <li><label for="women" class="gender-label">WOMEN</label></li>
                        <li><label for="men" class="gender-label">MEN</label></li>
                        <li><label for="kids" class="gender-label">KIDS</label></li>
                </ul>

                <!-- Hidden radio buttons  FOR MEN WOMEN KIDS-->
                
                <input type="radio" name="gender" id="women" class="gender-radio">
                <input type="radio" name="gender" id="men" class="gender-radio">
                <input type="radio" name="gender" id="kids" class="gender-radio">

                <!-- MAN LIST LINKS -->
                <ul class="subgenderman">
                    <li><a href="#">TrendingM</a></li>
                    <li><a href="#">ClothingM</a></li>
                    <li><a href="#">AccesoriesM</a></li>
                    <li><a href="#">ShoesM</a></li>
                    <li><a href="#">SportM</a></li>
                </ul>
                <!-- WOMAN LIST LINKS -->
                <ul class="subgenderwomen">
                    <li><a href="#">TrendingW</a></li>
                    <li><a href="#">ClothingW</a></li>
                    <li><a href="#">AccesoriesW</a></li>
                    <li><a href="#">ShoesW</a></li>
                    <li><a href="#">SportW</a></li>
                </ul>
                <!-- KIDS LIST LINKS -->
                <ul class="subgenderkids">
                    <li><a href="#">TrendingK</a></li>
                    <li><a href="#">ClothingK</a></li>
                    <li><a href="#">AccesoriesK</a></li>
                    <li><a href="#">ShoesK</a></li>
                    <li><a href="#">SportK</a></li>
                </ul>
.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; 
            }