Create Accordion using HTML CSS and JavaScript | FAQ Accordion

Tabs and Accordion | January 14, 2024

In this tutorial blog I Create Accordion using HTML CSS and JavaScript | FAQ Accordion

Video tutorial of Accordion using HTML CSS and JavaScript | FAQ Accordion

This tutorial video can help you to Create Accordion using HTML CSS and JavaScript.

You might like this

Create Accordion using HTML CSS and JavaScript [Source Codes]

HTML Code

Copy

<div class="container">
    <div class="cb-faq-box">
      <div class="cb-faq-trigger">
        Q1. Lorem ipsum dolor sit amet consectetur adipisicing elit.
      </div>
      <div class="cb-faq-container">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit soluta velit, exercitationem, culpa doloremque, ratione illo odio consequatur ea ad obcaecati. Similique magnam sed quod ipsam minima esse vitae nostrum.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit soluta velit, exercitationem, culpa doloremque, ratione illo odio consequatur ea ad obcaecati. Similique magnam sed quod ipsam minima esse vitae nostrum.
      </div>
    </div>
    <div class="cb-faq-box">
      <div class="cb-faq-trigger">
        Q2 Lorem ipsum dolor sit amet consectetur adipisicing elit.
      </div>
      <div class="cb-faq-container">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit soluta velit, exercitationem, culpa doloremque, ratione illo odio consequatur ea ad obcaecati. Similique magnam sed quod ipsam minima esse vitae nostrum.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit soluta velit, exercitationem, culpa doloremque, ratione illo odio consequatur ea ad obcaecati. Similique magnam sed quod ipsam minima esse vitae nostrum.
      </div>
    </div>
    <div class="cb-faq-box">
      <div class="cb-faq-trigger">
        Q3. Lorem ipsum dolor sit amet consectetur adipisicing elit.
      </div>
      <div class="cb-faq-container">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit soluta velit, exercitationem, culpa doloremque, ratione illo odio consequatur ea ad obcaecati. Similique magnam sed quod ipsam minima esse vitae nostrum.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit soluta velit, exercitationem, culpa doloremque, ratione illo odio consequatur ea ad obcaecati. Similique magnam sed quod ipsam minima esse vitae nostrum.
      </div>
    </div>
    <div class="cb-faq-box">
      <div class="cb-faq-trigger">
        Q4. Lorem ipsum dolor sit amet consectetur adipisicing elit.
      </div>
      <div class="cb-faq-container">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit soluta velit, exercitationem, culpa doloremque, ratione illo odio consequatur ea ad obcaecati. Similique magnam sed quod ipsam minima esse vitae nostrum.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit soluta velit, exercitationem, culpa doloremque, ratione illo odio consequatur ea ad obcaecati. Similique magnam sed quod ipsam minima esse vitae nostrum.
      </div>
    </div>
    <div class="cb-faq-box">
      <div class="cb-faq-trigger">
        Q5. Lorem ipsum dolor sit amet consectetur adipisicing elit.
      </div>
      <div class="cb-faq-container">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit soluta velit, exercitationem, culpa doloremque, ratione illo odio consequatur ea ad obcaecati. Similique magnam sed quod ipsam minima esse vitae nostrum.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit soluta velit, exercitationem, culpa doloremque, ratione illo odio consequatur ea ad obcaecati. Similique magnam sed quod ipsam minima esse vitae nostrum.
      </div>
    </div>
  </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

CSS Code

Copy

*,*:after,*:before{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
body{
	font-family: arial;
	font-size: 18px;
	margin: 0;
	background: #30353f;
	color: #fff;
	line-height: 1.6;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
}
.container{
	width: 100%;
	max-width: 900px;
	margin: 30px auto;
}
.cb-faq-box{
	text-align: left;
	background-color: #fff;
	color: #000;
	padding: 20px;
	border-radius: 15px; 
	margin-bottom: 30px;
}

.cb-faq-trigger{
	font-size: 120%;
	font-weight: 700;
	color: #30353f;
	margin-bottom: 10px;
	position: relative;
	padding-right: 25px;
	cursor: pointer;
	
}
.cb-faq-trigger:after {
	content: "+";
	font-size: 26px;
	line-height: 1;
	position: absolute;
	right: 0px;
	top: 3px;
}
.cb-faq-container{
	height: 25px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	width: 100%;
}
.cb-faq-box.active .cb-faq-trigger::after{
	content: "-";
}
.cb-faq-box.active .cb-faq-container{
	height: auto;
	white-space: normal;
}

JavaScript Code

Copy

<script>
  $('.cb-faq-box:first').addClass('active');
    $(".cb-faq-box").click(function(event) {
    if(!$(this).hasClass("active")){
      $('.cb-faq-box').removeClass('active');
      $(this).addClass('active');
      
    }else{
      $('.cb-faq-box').removeClass('active');
    }
  });
  $(".cb-faq-container").on('click', function (event) {
		event.stopImmediatePropagation();
	});
</script>