Show/hide Button ✔ Botón Mostrar/Ocultar con【JavaScript】

Simple JS show/hide | Mostrar y ocultar elemento con Javascript. | show/hide button | botón mostrar/ocultar.

By Donovan Hutchinson

DEMO
HTML

<button id="show-element">Show it</button>
<div id="to-show" class="hide">
<h1>Some hidden content</h1>
<p>Pressing the button shows this content. Nice!</p>
</div>

CSS

div{transition:all .5s cubic-bezier(.83,-.43,.21,1.42)}
.hide{opacity:0;top:calc(50% + 8em)}
.show{opacity:1;top:calc(50% + 6em)}
body{background-color:#0a758f;transition:background .5s ease-out;font-family:HelveticaNeue,Arial,Sans-serif}
body.on{background-color:#134E5E}
button{background:#134E5E;background:-webkit-linear-gradient(to left,#0a758f,#134E5E);background:linear-gradient(to left,#0a758f,#134E5E);border:none;border-radius:15px;color:#fff;cursor:pointer;font-size:24px;padding:1em 2em;position:absolute;left:50%;top:50%;transform:translate3d(-50%,-50%,1em);transition:all .4s ease-out}
button.active{background:#134E5E;background:-webkit-linear-gradient(to right,#0a758f,#134E5E);background:linear-gradient(to right,#0a758f,#134E5E);color:#fff;outline:0}
button:focus{outline:0}
div{color:#fff;text-align:center;position:absolute;left:50%;top:(50%+4em);transform:translate(-50%,-50%)}

JS

document.getElementById('show-element').onclick = function() {
  var element = document.getElementById('to-show');
  if (element.className === 'hide') {
    element.className = 'show';
    document.getElementsByTagName('body')[0].className = 'on';
    document.getElementById('show-element').className = 'active';
  } else {
    element.className = 'hide';
    document.getElementsByTagName('body')[0].className = 'off';
    document.getElementById('show-element').className = '';
  }
}
¿Te gusto el post?
¡Compártelo!

☑ Puede que también te interese:

CSS Border Transitions
Sign-post arrow buttons with CSS
8 Toggle Buttons On - Off only CSS