How to maximize and minimize a div (no jquery only javascript)

Question

hello I need to maximaze or minimize a div in my html page using only javascript no jquery i wanna be able to do like this http://jsfiddle.net/miqdad/Qy6Sj/1/

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

this is exactly how i want it to be but no jquery

but with no jquery only javascript, can someone please help me, I googled this everywhere and couldnt find the answer

Answer 1

a simple google search came up with:

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>