How to make smooth animation for JS menu?

Question

css

Good day. There is a JS code that, when clicked, opens the menu, and when the button is clicked again, closes it.

function openbox(id){
    display = document.getElementById(id).style.display;

    if(display=='none'){
       document.getElementById(id).style.display='block';
    }else{
       document.getElementById(id).style.display='none';
    }
}

The script itself. Question. How to make the script not request the menu style, but immediately open it? Knowing that the block with the menu is already hidden. I am making a menu for the mobile version of the site and it opens only with a double click. As I understand it, the first click requests a style, and then decides what to do.
And another moment. How can I make a smooth opening of the menu and change the icon (background) of the menu button, when clicked, the menu itself opens.
Thanks in advance!

Answer 1

Make it a rule to write the whole example at once on jsfiddle.net or similar resources.
Here is the pure js code , css3
animation with js animation is faster to do with jQuery

Answer 2

Did so, added a class which showed.
For example, initially, position: absolut; right/left: -100% When added active, then right/left: 0;
and transition.
I'll try to look in ready-made ones.