<input type="text">
<div data-block="admin">
Admin block
</div>
<div data-block="user">
User block
</div>
div {
display: none;
}
var $blocks = document.querySelectorAll('[data-block]');
document.querySelector('input').addEventListener('input', function() {
var $block = document.querySelector('div[data-block="'+ this.value +'"]');
$block === null ? [].forEach.call($blocks, function(node) {
node.style.display = 'none';
}) : $block.style.display = 'block';
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.