<div class="one" style="display:block;">Hello</div>
<div class="two" style="display:none;">Hi</div>

<a href="#">Переключить</a>
(function () {
    'use strict';

    var selector = {
        $button: document.querySelector('a'),
        $one: document.querySelector('.one'),
        $two: document.querySelector('.two')
    };

    selector.$button.addEventListener('click', function (event) {
        event.preventDefault();
        if (isHidden(selector.$one)) {
            changeDisplay(selector.$one, 'block');
            changeDisplay(selector.$two, 'none');
        } else {
            changeDisplay(selector.$one, 'none');
            changeDisplay(selector.$two, 'block');
        }
    });

    function changeDisplay($node, value) {
        $node.style.display = value;
        return $node;
    }

    function isHidden($node) {
        return window.getComputedStyle($node).display === 'none';
    }

}());

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.