Site icon Anthony Carbon

FAQ’s design section with html css and js code

Anthony

Before we start please do support my Youtube channel Web Developer Green – https://www.youtube.com/channel/UCSilTsUejzMeHJ8rSvp2K_g master, thank you!

HTML CODE

<div class="r-faq">
	<div class="r-wrap">
    	<h2>Top Questions, our customers Ask</h2>
        <div class="faq-q active">what is slow roasting? <i class="fas fa-plus"></i></div>    
        <div class="faq-a" style="display:block;">Slow roasting is always better. The slower we bring the beans to temperature, the more consistent they are throughout the entire bean.</div>
        <div class="faq-q">Do you offer refunds? <i class="fas fa-plus"></i></div>
        <div class="faq-a">If you are not fully satisfied with your BREW AVENUE COFFEE, just return it within 30 days and we will refund your purchase price. We are confident that you will love your BREW AVENUE PRODUCT!</div>
        <div class="faq-q last-child">Do you offer Free shipping? <i class="fas fa-plus"></i></div>
        <div class="faq-a last-child">Yes, we do and most orders arrive within 2-3 Business Days via USPS or UPS.</div>
    </div>
</div>

ALL CSS CODE

.r-faq .r-wrap {
	width: 780px;
	margin: auto;
}
.r-faq h2 {
	text-align: center;
}
.faq-q {
	padding: 10px;
	border: 1px solid #000;
	position: relative;
	border-bottom: 0;
	cursor: pointer;
}
.faq-a {
	display: none;
	padding: 20px;
	border: 1px solid #000;
	border-bottom: 0;
}
.faq-q i {
	position: absolute;
	right: 10px;
	top: 10px;
}
.faq-a.last-child,
.faq-q.last-child {
	border-bottom: 1px solid #000;
}
.faq-q.active.last-child {
	border-bottom: 0;
}

Youtube DEMO

ALL CODE

<!DOCTYPE html>
<html>
<head>
<title>DIV ALIGNED CENTER HTML CSS EXAMPLE</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />

<script src="https://www.anthonycarbon.com/wp-includes/js/jquery/jquery.js" type="text/javascript"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/fontawesome.min.css" rel="stylesheet" type="text/css" media="all" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/solid.min.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>

<div class="r-faq">
	<div class="r-wrap">
    	<h2>Top Questions, our customers Ask</h2>
        <div class="faq-q active">what is slow roasting? <i class="fas fa-plus"></i></div>    
        <div class="faq-a" style="display:block;">Slow roasting is always better. The slower we bring the beans to temperature, the more consistent they are throughout the entire bean.</div>
        <div class="faq-q">Do you offer refunds? <i class="fas fa-plus"></i></div>
        <div class="faq-a">If you are not fully satisfied with your BREW AVENUE COFFEE, just return it within 30 days and we will refund your purchase price. We are confident that you will love your BREW AVENUE PRODUCT!</div>
        <div class="faq-q last-child">Do you offer Free shipping? <i class="fas fa-plus"></i></div>
        <div class="faq-a last-child">Yes, we do and most orders arrive within 2-3 Business Days via USPS or UPS.</div>
    </div>
</div>
<style>
.r-faq .r-wrap {
	width: 780px;
	margin: auto;
}
.r-faq h2 {
	text-align: center;
}
.faq-q {
	padding: 10px;
	border: 1px solid #000;
	position: relative;
	border-bottom: 0;
	cursor: pointer;
}
.faq-a {
	display: none;
	padding: 20px;
	border: 1px solid #000;
	border-bottom: 0;
}
.faq-q i {
	position: absolute;
	right: 10px;
	top: 10px;
}
.faq-a.last-child,
.faq-q.last-child {
	border-bottom: 1px solid #000;
}
.faq-q.active.last-child {
	border-bottom: 0;
}
</style>
<script>
jQuery('.faq-q').click(function () {
    jQuery(this).toggleClass('active');
    var faqq = jQuery(this).next();
    jQuery(faqq).slideToggle("slow", function () {
    });
});
</script>
</body>
</html>
Exit mobile version