Logo Luan Morina
Toggle a layer's visibility with a slide effect
 
Demo
From which language does the word “ketchup” come?

Ketchup comes from the Chinese word, 'kê-tsiap', the name of a sauce derived from fermented fish.

HTML
<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>

CSS
.demo-container {
margin: 2em auto;
max-width: 500px;
}
.demo-header {
padding: 10px 20px;
background-color: #ECECEC;
border-top-right-radius: 6px;
border-top-left-radius: 6px;
}
.demo-header::after {
content: "\f0ab";
font-family: FontAwesome;
font-size: 14px;
padding-top: 6px;
color: #454545;
float: right;
}
.demo-header-close {
padding: 10px 20px;
}
.demo-header-close::after {
content: "\f0aa";
font-family: FontAwesome;
font-size: 14px;
padding-top: 6px;
color: #9F0000;
float: right;
}
.demo-content {
display: none;
border: 1px solid #ECECEC;
padding: 20px;
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
}
JS
$(document).ready(function() {
$(".demo-header").click(function() {
$(this).next(".demo-content").slideToggle("slow");
$(this).toggleClass("demo-header-close");
});
});