使用 css 和 js 转换 onclick 下拉文本的高度

Question

我试着做一个部分来谈谈我的爱好等等，但是文字有点太多，所以我决定，你只看第一句话，点击它可以阅读全文。我用了一些CSS和JS，但是我没有用Jquery。现在我想给它添加一个过渡，但我做不到。这是我的代码：

        // 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>

我想要打开和关闭 animation/transition，但我无法通过过渡属性得到任何东西。提前感谢您的帮助。

Answer 1

使用 jquery TOGGLE 很容易做到：

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

使用 css 和 js 转换 onclick 下拉文本的高度

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

javascript

html

jquery

css

css-transitions