JS accordion, How to slide up the menu content?

JavaScript
1

I’m making an JS accordion and I just miss the final step.

That is - say:
I click menu 1, content 1 slides down (shows up).
After that, I click menu 2, content 2 slides down but
content 1 of menu 1 just display: none (abruptly disappers) but not slides up.

For the slide up effect, I wrote a function called cutHeight().
The cutHeight function works perfectly independently but not coherent with the accordion function.
I have no idea why cutHeight function is not executed at all???
Is there anything wrong with my scripts?

Could anyone help tweak a bit cause I’ve dragged in it for a few days and became tired of finding the fix myself…:sick:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>

function accordion(openAccordionID){
    
    document.getElementById("content"+openAccordionID).style.display =
    (document.getElementById("content"+openAccordionID).style.display == "none")
    ? "block" : "none";
    
    var sumAccordion;
    if(document.all){
        sumAccordion = document.body.getElementsByTagName("div").length/2;        
        }
    else {sumAccordion = document.getElementsByClassName("content").length;}
    
    for(var closeAccordionID=1; closeAccordionID<=sumAccordion; closeAccordionID++){
        if(closeAccordionID == openAccordionID){continue;}
        document.getElementById("content"+closeAccordionID).style.display = "none";

        }

    addHeight(openAccordionID);
    [COLOR="Blue"]cutHeight(closeAccordionID);[/COLOR]
    
    }

    var h=0;
    var t;
    function addHeight(openAccordionID){
        clearInterval(t);
        document.getElementById("content"+openAccordionID).style.height = h+"px";
        h+=1;
        t = setInterval("addHeight('"+openAccordionID+"')",10);
        if(h==100){clearInterval(t);h=0;}
            }
    
    [COLOR="Blue"]var H=100;
    var T;
    function cutHeight(closeAccordionID){
        clearInterval(T);
        document.getElementById("content"+closeAccordionID).style.height = H+"px";
        H-=1;
        T = setInterval("cutHeight('"+closeAccordionID+"')",10);
        if(H==0){clearInterval(T);}
            }
[/COLOR]
</script>
<style>
.menu {
    background-color: #6F6;
    width: 200px;
    height: 50px;}
.content {
    display: none;
    background-color: yellow;
    width: 200px;
    height:0px;
    overflow: hidden;}

</style>
</head>
<body>
<div onclick="accordion(1)" class="menu">Menu 1</div>
<div id="content1" class="content">Content 1</div>
<div onclick="accordion(2)" class="menu">Menu 2</div>
<div id="content2" class="content">Content 2</div>
<div onclick="accordion(3)" class="menu">Menu 3</div>
<div id="content3" class="content">Content 3</div>
</body>
</html>