Spoiler Tabs

by Tiago Sousa

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div class="spoiler-window spoiler-closed">
  <div class="spoiler-header">
    <h4 class="spoiler-header-title">
      My first question?
    </h4>
    <span class="spoiler-toggle"></span>
  </div>

  <div class="spoiler-content">
    <p>
      Diam appetere has no, id has etiam ocurreret, ex usu dicunt mollis. Ad usu porro iudico, pri modus torquatos scripserit an. Sea an exerci suscipit. Ne ullum elaboraret vis, nec movet verterem ut.
    </p>
  </div>
</div>

<div class="spoiler-window">
  <div class="spoiler-header">
    <h4 class="spoiler-header-title">
      My second question?
    </h4>
    <span class="spoiler-toggle"></span>
  </div>

  <div class="spoiler-content">
    <p>
      Diam appetere has no, id has etiam ocurreret, ex usu dicunt mollis. Ad usu porro iudico, pri modus torquatos scripserit an. Sea an exerci suscipit. Ne ullum elaboraret vis, nec movet verterem ut.
    </p>
  </div>
</div>

CSS

body {
  background: #fbfbfb;
  color: #6e6e6e;
}

.spoiler-window .spoiler-header {
  background: #f9491f;
  color: #fff;
  position: relative;
  padding: 18px 16px;
  margin: 5px 0;
}

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

.spoiler-toggle {
  position: absolute;
  right: 17px;
  top: 17px;
  cursor: pointer;
}
.spoiler-toggle:after {
  content: "\f176";
  font-family: FontAwesome;
}

.spoiler-window .spoiler-content {
  padding: 10px;
  border: 1px solid #efefef;
  background: #fff;
  transition: height 2s;
}

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

.spoiler-closed .spoiler-content {
  visibility: hidden;
  margin: 0;
  padding: 0;
  height: 0px;
  transition: height 2s;
}

JavaScript

(function($){
  $(".spoiler-toggle").on("click", function() {
  	$(this).closest(".spoiler-window").toggleClass("spoiler-closed");
  });
})(jQuery);