Looking for guidance on how to add animation to gradually reveal the answer? Provided my code below. Any assistance in making this functional would be greatly appreciated.
<div class="q-a-set">
<div class="licensing-question" id="q_1">
<i class="fa fa-caret-square-o-down" aria-label="Answer"></i> <span>Do I need to pay?</span>
</div>
<div class="licensing-answer-closed" id="a1"><span class="licensing-answer">Yes</span></div>
</div>
.licensing-question{
font-size: 2.2em;
font-weight: 700;
font-family: 'Source Sans Pro', sans-serif;
color: #a8a8a8;
cursor: pointer;
line-height: 1.2em;
margin: 0;
padding: 0;
display: inline;
}
.licensing-answer-closed{
height: 0;
visibility: hidden;
}
.licensing-answer{
color: #222222;
font-size: 1.8em;
}
var showAnswerBtn = $(".licensing-question");
var caret = showAnswerBtn.find('.fa');
showAnswerBtn.click(function () {
//alert(caret);
event.preventDefault();
var target = this.id.split('_');
var id = "a" + target[1];
$("#" + id).toggleClass('licensing-answer-closed');
$(caret).toggleClass('fa-caret-square-o-up');
});