<div class="demo-container">

 <div class="demo-header">From which language does the word “ketchup” come?</div>
  <div class="demo-content"><p>Ketchup comes from the Chinese word, 'kê-tsiap', the name of a sauce derived from fermented fish.</p>
 </div>

</div>

.demo-container {
  margin: 0 auto;
  max-width: 500px;
  min-height: 240px;
  padding: 2em;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: linear-gradient(to top, #ffffff 0%, #dfe9f3 100%);
  border-radius: 6px;
}

.demo-header {
  position: relative;
  padding: 10px 24px 10px 10px;
  background-color: #ECECEC;
  border-top-right-radius: 6px;
  border-top-left-radius: 6px;
  cursor: pointer;
}

.demo-header::after {
  position: absolute;
  content: "\f0ab";
  font-family: FontAwesome;
  font-size: 16px;
  color: #454545;
  right: 6px;
}

.demo-header-close::after {
  position: absolute;
  content: "\f0aa";
  font-family: FontAwesome;
  font-size: 16px;
  color: #9F0000;
  right: 6px;
}

.demo-content {
  display: none;
  border: 1px solid #ECECEC;
  padding: 20px;
  border-bottom-right-radius: 6px;
  border-bottom-left-radius: 6px;
}

$(document).ready(function() {
 $(".demo-header").click(function() {
  $(this).next(".demo-content").slideToggle("slow");
  $(this).toggleClass("demo-header-close");
 });
});