Simple spoiler window

Código para criar um janel de minimização

by Tiago Sousa

HTML

<div class="spoiler-window">
  <div class="spoiler-header">
    <h2 class="spoiler-header-title">
      Teste
    </h2>
    <span class="spoiler-toggle"></span>
  </div>

  <div class="spoiler-content">
    <p>
      This is my spoiler windows content
    </p>
  </div>
</div>

<p>
  Pagina de testes para coisas e afins de cosias e tal
</p>

CSS

.spoiler-closed .spoiler-content {
  height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: none;
  opacity: 0;
}

.spoiler-window .spoiler-header {
  background: #ededed;
  border: 1px solid red;
  padding: 5px;
  padding-left: 40px;
  border-radius: 10px;
  position: relative;
}

.spoiler-window .spoiler-header .spoiler-header-title {
  margin: 0px;
  line-height: 1;
}

.spoiler-toggle {
  position: absolute;
  left: 15px;
  top: 9px;
  cursor: pointer;
}

.spoiler-toggle:after {
  content: "\f067";
}

.spoiler-window .spoiler-content {
  border: 1px solid red;
  padding: 10px;
}

JavaScript

$(document).ready(function() {
  $(".spoiler-toggle").on("click", function() {
    $(".spoiler-window").toggleClass("spoiler-closed");
  });
});