I wish to convert my FAQ section that utilizes Jquery to smoothly slide each question up and down into pure Javascript and CSS transitions.
The reason is for optimization and making a page as lightweight as possible. My goal is to remove jquery from my website altogether because it’s unnecessary.
I have uploaded my FAQ section into an HTML page and hosted it on a URL. This way, you can try it for yourself and see it in action. Please check here.
You can click on each title, and it will slide up and down. To have an exact replica of what I currently have is proving to be difficult. I have tried CSS transitions but it seems to require changing the height. Right now, I use display: block or display: none because the height is unknown. translateY(100%) to calculate the height at runtime didn’t seem to work either.
I will insert my current Jquery code here:
<style>
#sectionFAQWrapper {
padding-bottom: 30px;
}
#sectionFAQWrapper ul {
padding: 5px 0px 12px 0px;
margin: 0px;
}
#sectionFAQWrapper ul li {
list-style-type: none;
font-size: 20px;
}
#sectionFAQTopBanner {
text-align: center;
padding: 40px 0px;
background: linear-gradient(90deg, rgb(74 79 177) 0%, rgb(31 32 82) 100%);
color: #fff;
margin-bottom: 30px;
}
#sectionFAQTopBanner h2 {
font-weight: 600;
letter-spacing: -1px;
font-size: 46px;
margin: 0;
font-family: 'Oswald';
}
.questionItemWrapper {
max-width: 1000px;
margin: 0 auto;
}
#sectionFAQWrapper h3 {
font-size: 30px;
}
#sectionFAQWrapper p {
font-size: 20px;
padding-bottom: 10px;
font-weight: 400;
margin: 0;
}
.questionItemBoldBlue {
color: #4549a5;
font-weight: 600;
}
.questionItemBoldTopBorderBlue {
border-top: none;
}
.questionItemHeader {
position: relative;
background-color: rgba(0,0,0,.03);
padding: 15px;
margin: 0px 10px;
}
.questionItemHeader div {
display: inline-block;
font-family: 'Oswald';
}
.questionItemToggle {
position: absolute;
top: 17px;
left: 14px;
content: url(https://cdn.shopify.com/s/files/1/0022/5103/0563/files/doubleDownArrowBlack.png?v=1621284261);
height: 34px;
width: 34px;
}
.questionItemRotate180 {
transform: rotate(180deg);
content: url(https://cdn.shopify.com/s/files/1/0022/5103/0563/files/doubleDownArrowBlue.png?v=1621284261);
}
.questionItemQuestion {
font-size: 28px;
padding-left: 40px;
}
.questionItemContent {
padding: 20px 20px 10px 20px;
margin: 0;
display: none;
font-family: 'Open Sans';
}
</style>
<div id="sectionFAQWrapper">
<div id="sectionFAQInner">
<div id="sectionFAQTopBanner">
<h2>FREQUENTLY ASKED QUESTIONS</h2>
</div>
<div class="questionItemWrapper questionItemBoldTopBorderBlue">
<div class="questionItemHeader">
<div class="questionItemToggle questionItemBoldBlue questionItemRotate180"></div>
<div class="questionItemQuestion questionItemBoldBlue">Title #1</div>
</div>
<div class="questionItemContent" style="display: block;">
<p><b>Content Paragraph #1</p>
<p><b>Content Paragraph #2</p>
</div>
</div>
<div class="questionItemWrapper questionItemBoldTopBorderBlue">
<div class="questionItemHeader">
<div class="questionItemToggle"></div>
<div class="questionItemQuestion">Title #2</div>
</div>
<div class="questionItemContent" style="display: none;">
<p><b>Content Paragraph #1</p>
<p><b>Content Paragraph #2</p>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
// When DOM has loaded
$(document).ready(function() {
// FAQ section
$(".questionItemWrapper").click(function() {
$(this).find('.questionItemContent').toggle( "slow", function() {});
$(this).find('.questionItemQuestion').toggleClass("questionItemBoldBlue");
$(this).find('.questionItemToggle').toggleClass("questionItemBoldBlue");
$(this).find('.questionItemToggle').toggleClass("questionItemRotate180");
$(this).toggleClass("questionItemBoldTopBorderBlue");
});
// End of document.ready()
});
</script>