How do I animate this JS function that makes a div block/hide onclick of object?-CodePudding

How can I animate this so when the div appears and disappears expands down and retracts up? I thought maybe with css3 animations but when I add transition animations to my CSS it doesn't do anything.

    function SearchToggle(){
        var off=document.getElementById('SearchContainer');
        if (off.style.display == "none") {
            off.style.display = "block";
        } else {
            off.style.display = "none";
        }        
    }

#SearchContainer {
        border: none;
        outline: none;
        display: block;
        background-color: silver;
        color: #FFF;
        margin: 0 0 0 0;
        float: left;
        width: 400px;
        min-width: 400px;
        max-width: 400px;
        height: 40px;
        min-height: 40px;
        max-height: 40px;
    }

 <menu name="WindowMenu" id="WindowMenu" >
        <span name="WindowIcon-Span" id="WindowIcon-Span" >
            <img src="ROOT.ASSETS/IMAGES/ICONS/ICON GROUP 1/FAVICON1.64.png" name="WindowIcon-PNG" id="WindowIcon-PNG"  />
        </span>

        <span name="WindowTitle" id="WindowTitle" > PROTON CORE </span>

        <div name="WindowControl-Wrapper" id="WindowControl-Wrapper" >
           <i name="SearchIcon" id="SearchIcon"  onclick="SearchToggle()"></i>

           <input type="button" value="" name="WindowControl-1" id="WindowControl-1"  onclick="window.close(true)" />
           <input type="button" value="" name="WindowControl-2" id="WindowControl-2"  />
        </div>
    </menu>

    <form name="SearchContainer" id="SearchContainer" >

    </form>

I tried this instead to try an animate the height transition with CSS but it's ceased to work after changing it to height.

function SearchToggle(){
    var off=document.getElementById('SearchContainer');
    if (off.style.height == "0px") {
        off.style.height = "40px";
    } else {
        off.style.display = "0px";
    }        
}

#SearchContainer {
    border: none;
    outline: none;
    background-color: silver;
    color: #FFF;
    margin: 0 0 0 0;
    float: left;
    width: 400px;
    min-width: 400px;
    max-width: 400px;
    height: 0px;
    //min-height: 40px;
    //max-height: 40px;

    transition: height 2s;
}

CodePudding user response：

Ok, Here is what I think you want:

var current = "up";
     function SearchToggle(){
         if(current == "up"){
            document.getElementById("WindowMenu").classList.remove("WindowMenuUp")
            document.getElementById("WindowMenu").classList.add("WindowMenuDown")
            current = "down";
         }
        else {
            document.getElementById("WindowMenu").classList.remove("WindowMenuDown")
            document.getElementById("WindowMenu").classList.add("WindowMenuUp")
            current = "up";
        }
    }

.WindowMenuDown {
    height: 40px;
    transition: 1s;
  }
    .WindowMenuUp {
    height: 0;
    transition: 1s;
  }
  #WindowControl-Wrapper {
     overflow: auto;
  }

<menu name="WindowMenu" id="WindowMenu" >
        <span name="WindowIcon-Span" id="WindowIcon-Span" >
            <img src="ROOT.ASSETS/IMAGES/ICONS/ICON GROUP 1/FAVICON1.64.png" name="WindowIcon-PNG" id="WindowIcon-PNG"  />
        </span>

        <span name="WindowTitle" id="WindowTitle" > PROTON CORE </span>

        <div name="WindowControl-Wrapper" id="WindowControl-Wrapper" >
           <i name="SearchIcon" id="SearchIcon" ></i>

           <input type="button" value="" name="WindowControl-1" id="WindowControl-1"  onclick="window.close(true)" />
           <input type="button" value="" name="WindowControl-2" id="WindowControl-2"  />
        </div>
    </menu>

    <form name="SearchContainer" id="SearchContainer" >
    <input type="button" value="Button"  onclick="SearchToggle()">
    </form>

If you decide to use JQuery as requested, here is a snippet:

#WindowControl-Wrapper {
  display: none;
  overflow: auto;
}

<head>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>

<body>
  <menu name="WindowMenu" id="WindowMenu" >
        <span name="WindowIcon-Span" id="WindowIcon-Span" >
            <img src="ROOT.ASSETS/IMAGES/ICONS/ICON GROUP 1/FAVICON1.64.png" name="WindowIcon-PNG" id="WindowIcon-PNG"  />
        </span>

        <span name="WindowTitle" id="WindowTitle" > PROTON CORE </span>

        <div name="WindowControl-Wrapper" id="WindowControl-Wrapper" >

           <input type="button" value="" name="WindowControl-1" id="WindowControl-1"  onclick="window.close(true)" />
           <input type="button" value="" name="WindowControl-2" id="WindowControl-2"  />
        </div>
    </menu>

    <form name="SearchContainer" id="SearchContainer" >
    <input type="button" value="Button" id="button">
    </form>
  <script type="text/javascript">
  <!--
    $(document).ready(function(){
        var current = "up";
        $('#button').on('click',function() {

            if(current == "up"){
                $('#WindowControl-Wrapper').show(500).slideDown(500);
                current = "down"
            }
            else{
                $('#WindowControl-Wrapper').hide(500).slideUp(500);
                current = "down"
            }

        });
    })
  //-->
  </script>
 </body>