Equivalent of .show() - jQuery in plain JavaScript

Question

Anyone has any idea whats the equivalent of.show() of jquery in javascript?

I have tried using document.getElementById and add / remove class that I named "show" // "hide" but that doesn't work very well I might have wrong attributes in those classes I am not sure..

the show class is :

.show{
    position:relative;
    display:block;
}

and the hide class is:

.hide{
    position:absolute;
    top:0px;
    right:0px;
    display:none;
}

I am pretty sure there is a better way of going so.

Answer 1

document.getElementById('myElement').style.display = 'block'; // show
document.getElementById('myElement').style.display = 'none'; // hide

Answer 2

jQuery takes into account what the value of display was before hiding. When you fire show(), it returns it back to what that value was. And so, it's NOT just simply setting the element's display property to block and none.

so basically:

function hide(){
    //get previous display value
    //store it in an internal cache. jQuery has an internal data storage
    //hide element
}

function show(){
    //get previous display value for that element
    //apply to element to show it
}

---

.show()

The matched elements will be revealed immediately, with no animation. This is roughly equivalent to calling .css('display', 'block'), except that the display property is restored to whatever it was initially. If an element has a display value of inline, then is hidden and shown, it will once again be displayed inline.