Cacher is the code snippet organizer for pro developers

// faq

$(".faq").on("click", ".faq-title", function(){
	$(this).toggleClass("open").next(".faq-description").slideToggle();
});

<dl class="faq">
	<dt class="faq-title"></dt>
	<dd class="faq-description"></dd>
</dl>

/* faq */

.faq .faq-title{
    position: relative;
    background: #359AD6;
    color: #fff;
    margin: 0 0 5px;
    padding: 10px 10px 10px 50px;
    display: block;
    cursor: pointer;
    font-size: 1.125em;
    font-weight: 300;
}

.faq .faq-title:before, .faq .faq-title:after{
	content:"";
	position:absolute;
	background: #fff;
}

.faq .faq-title:before{
	width: 20px;
	height: 2px;
	left: 14px;
	top: 22px;
}

.faq .faq-title:after{
	width: 2px;
	height: 20px;
	left: 23px;
	top: 13px;
}

.faq .faq-title:hover{
	background: #4EB2EE;
}

.faq .faq-title.open{
	background: #07224C;	
}

.faq .faq-title.open:after{
	height: 0;
}

.faq .faq-description{
	padding: 25px;
	border: 1px solid #EAEDF2;
	display: none;
	position: relative;
	top: -5px;
	margin-bottom: 1px;
}