Making a show/hide smaller

Question

How would I make this code smaller? Maybe a toggle, but people were saying this was easily done in jQuery. But the problem is that I am not a fan of using jQuery for just one thing in my code.

function open() {
document.getElementById('message').style.display='block';
document.getElementById('fade').style.display='block';
}

function close() {
document.getElementById('message').style.display='none';
document.getElementById('fade').style.display='none';
}

Answer 1

var message = document.getElementById('message'),
    fade = document.getElementById('fade');

function open() {
    message.style.display = fade.style.display = 'block';
}

function close() {
    message.style.display = fade.style.display = 'none';
}

Or:

function toggle() {
    var message = document.getElementById('message'),
        fade = document.getElementById('fade'),
        currentdisplay = getComputedStyle(message, null)['display'];

    if(currentdisplay == 'block' || currentdisplay == 'inline')
        message.style.display = fade.style.display = 'none';
    else
        message.style.display = fade.style.display = 'block'; /* or inline */
}

Or:

function toggle() {
    var currentdisplay = getComputedStyle(arguments[1], null)['display'],
        i,
        newdisplay;

    if(currentdisplay == 'block' || currentdisplay == 'inline')
        newdisplay = 'none';
    else
        newdisplay = 'block';

    for(i = 0; i < arguments.length; i++)
        arguments[i].style.display = newdisplay;
}

var message = document.getElementById('message'),
    fade = document.getElementById('fade');

toggle(message, fade); /* hide */
toggle(message, fade); /* show */

document.body.onclick = function(){
    toggle(message, fade);
}

​

---

Toggle Example:

http://jsfiddle.net/djHTq/

Answer 2

DRY it up.

var b='block',h='none',m='message',f='fade';
function s(i,d){document.getElementById(i).style.display=d}
function open(){s(m,b);s(f,b)}
function close(){s(m,h);s(f,h)}

With the whitespace and proper variable names (to be passed to a minifier), this looks like:

var show = 'block', hide = 'none', message = 'message', fade = 'fade';

function setStyle(id, display) {
  document.getElementById(id).style.display=display;
}
function open() {
  setStyle(message, show);
  setStyle(fade, show);
}
function close() {
  setStyle(message, hide);
  setStyle(fade, hide);
}

There are some best-practices which don't relate to the question but are worth considering if your project grows beyond this trivial situation:

• Use a minifier. My favorite is uglifyjs. This allows you to use meaningful variable names in your unminified code (like the second example). The minifier will output code more like (but probably even better than) the first example. Even with a minifier, keep thinking about what it can and cannot do - creating a private shortcut to a long public API like document.getElementById can aid the minification if you use that API frequently. Look at the minified code to make sure there isn't something you can do to optimize it.
• Separate your javascript into .js modules that are loaded separate from the page and asychrounously, if possible.
• Manage all your static assets (like the .js modules) so they have a long cache timeout - use the Expires: http header. Then change their URLs when they actually change. This way, clients can cache them indefinitely until you change them & then the client will immediately fetch a new version.
• Put discrete modules inside function wrappers, so that your variables don't conflict with other pieces of code - either your own or 3rd party modules. If you want to make a variable public, do it explicitly: window.pubvar =

Answer 3

var toggle = function(doc){
    var $ = doc.getElementById, message = $('message'), fade = $('fade'), open = true;
    return function(){
        var display = open ? 'none' : 'block';
        message.style.display = display;
        fade.style.display = display;
        open = !open;
    } 
}(document);

toggle(); // Hide both elements
toggle(); // Show both elements. Rinse and repeat.

Answer 4

Avoids polluting global scope:

(function() {
    var msgstl = document.getElementById('message').style,
        fdestl = document.getElementById('fade').style;
    window.open = function() {msgstl.display = fdestl.display = "block";};
    window.close = function() {msgstl.display = fdestl.display = "none";};
})();

Answer 5

One thing is you can create a helper function for setting styles on elements. This would be useful in cases where you need to set many different elements.

function setStyle(element, style, value) {
    document.getElementById(element).style[style] = value;
}
function open() {
    setStyle('message', 'display', 'block');
    setStyle('fade', 'display', 'block');
}
function close() {
    setStyle('message', 'display', 'none');
    setStyle('fade', 'display', 'none');
}

You may also want to set the elements to variables if you work with the elements often enough.

var message = document.getElementById('message'), fade = ...