Transition the height of an onclick drop down text with css and js

I tried to make a section where I talk about my hobbies etc., but the text was a bit too much, so I decided, that you only read the first sentence and can click it to read the whole text. I used some CSS and JS, but I didn’t use Jquery. Now I want to add a transition to it, but I can’t do it. Here is my code:

        // On Header-Click, open the description

        function change_css1() {
            document.getElementById('expand1').setAttribute("class", "opened");
        }

        function change_css2() {
            document.getElementById('expand2').setAttribute("class", "opened");
        }


        // On Description-click, close the description

        function css_change1() {
            document.getElementById('expand1').setAttribute("class", "closed");
        }

        function css_change2() {
            document.getElementById('expand2').setAttribute("class", "closed");
        }

        .flexD {
            display: flex;
            margin: 0;
            padding: 0;
            list-style: none;
            gap: 1rem;
            justify-content: space-around;
        }
        
        .DHead {
            text-align: center;
            margin-bottom: 30px;
            margin-top: 30px;
            color: green;
            cursor: pointer;
        }
        
        .headingD {
            font-size: 60px;
            text-align: center;
            color: black;
            font-family: 'Work Sans';
        }
        
        .headingH6 {
            font-size: 30px;
            text-align: center;
            color: black;
            font-family: 'Work Sans';
        }
        
        aside {
            margin-top: 100px;
            color: black;
            font-size: 35px;
            text-align: left;
        }
        
        aside p {
            box-shadow: 0px 0px 20px 1px green;
            border-radius: 35px;
            margin: 0px 20px 60px 20px;
            padding: 10px 50px 25px 50px;
            line-height: 1.5;
            overflow: hidden;
            font-family: sans-serif;
            text-align: left;
            cursor: pointer;
        }
        
        .opened {
            overflow: visible;
            height: auto;
        }
        
        .closed {
            overflow: hidden;
            height: 1em;
        }
        
        a {
            cursor: pointer;
            color: black;
            text-decoration: none;
        }
        
        hr {
            width: 100%;
            height: 5px;
            color: black;
            background-color: black;
        }

 <aside id="asideDescription">

        <!-- Heading of Description -->

        <div>
            <hr>
            <h1 class="headingD"> My Hobbies.
                <h1 class="headingD">How did it all start? Do I still practice my hobbies and how did I get into the hobby in the first place? </h1>
                <h6 class="headingH6">(Press on the heading to expand the text, <br /> or on the text to collapse it ^^) </h6>
        </div>


        <hr>



        <div>

            <div class="flexD">
                <h2 class="DHead" onclick="change_css1();">Text Header</h2>
            </div>
            <div>
                <p class="closed" id="expand1" onclick="css_change1();">
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
                    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
                    dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
                    erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                </p>
            </div>

            <hr>

            <div class="flexD">
                <h2 class="DHead" onclick="change_css2();">Text Header</h2>
            </div>
            <div>
                <p class="closed" id="expand2" onclick="css_change2();"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
                    no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
                    et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
                    magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
            </div>


        </div>

    </aside>

I would want to have a opening and closing animation/transition, but I could not get anything with the transition property. Thanks for the help in advance.

Answer

using jquery TOGGLE its easy to do:

$("DHead").toggle("slow");