如何最大化和最小化一個 div（沒有 jquery 只有 javascript）

Question

你好，我需要最大化或最小化我的 html 頁面中的一個 div，僅使用 javascript 否 jquery 我希望能夠這樣做http://jsfiddle.net/miqdad/Qy6Sj/1/

$("#button").click(function(){
    if($(this).html() == "-"){
        $(this).html("+");
    }
    else{
        $(this).html("-");
    }
    $("#box").slideToggle();
});

這正是我想要的，但沒有 jquery

但是沒有 jquery 只有 javascript，有人可以幫我嗎，我到處都用谷歌搜索，找不到答案

Answer 1

一個簡單的谷歌搜索得出：

https://www.itcodar.com/javascript/expand-div-on-click-with-smooth-animation.html#:~:text=How%20to%20display%20a%20div%20with%20a%20smooth,transition%20must%20include%20the%20change%20of%20height.%20Thus%3A

 function seeMore() { const text = document.getElementById('website-info-idea') const text2 = document.getElementById('website-info-technical') text.classList.toggle("show") text2.classList.toggle("show") }

 .col { opacity: 0; height: 0; overflow: hidden; transition: all 1s ease-in-out; }.col.show { opacity: 1; height: 23px; transition: all 1s ease-in-out; } #a1 { display:inline-block; border: solid 2px black; }

 <div id='a1'> <a onclick="seeMore()" class="btn btn-secondary btn-md btn-custom">About this Website</a> <div class="col" id="website-info-idea">Idea</div> <div class="col" id="website-info-technical">Technical</div> </div>