Efeito mostrar – Botão show/hide área spoiler
Poste rápido. Apenas o código mesmo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p { margin: 0; }
.spoiler-area {
border: 1px solid #000;
padding: 10px;
height: auto;
}
.spoiler-area.is-closed { height: 0; overflow: hidden; padding: 10px 0 0; }
</style>
</head>
<body>
<strong>Spoiler</strong> <button data-target="spoiler1" class="btn-spoiler">Show</button>
<div id="spoiler1" class="spoiler-area is-closed">
<p>Mensagem aqui</p>
</div><!-- .spoiler-area -->
<script>
(function(){
"use strict";
var $btns = document.querySelectorAll('.btn-spoiler');
function loop($els, cb) {
var i = $els.length;
while(i--) {
cb($els[i]);
}
}
loop($btns, function($btn){
$btn.addEventListener("click", function(){
var $spoiler = document.getElementById(this.getAttribute("data-target"));
if( this.innerHTML === "Show" ){
this.innerHTML = "Hide";
$spoiler.classList.remove("is-closed");
} else {
this.innerHTML = "Show";
$spoiler.classList.add("is-closed");
}
});
});
}());
</script>
</body>
</html>