<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="accordion-container">
<div class="set">
<a href="javascript:void(0)" class="active">
What are the benefits of taking a Digital Marketing Course?
<i class="fa fa-minus"></i>
</a>
<div class="content" style="display: block;">
<p>Marketing professionals with genuine knowledge, skills and verified experience by a certification are always preferred and accepted across the industry organizations and recruiters. A continuous learning for the working professionals is not only crucial but also helps them expanding the range of skill sets while becoming more flexible in the place of work.</p>
<p>This digital marketing course will help learners standing out among ordinary people while polishing the skills already existing in them. In addition, this course is also helpful for them to take a necessary jump for bigger and more passionate roles.</p>
</div>
</div>
<div class="set">
<a href="javascript:void(0)">
What are the program objectives?
<i class="fa fa-plus"></i>
</a>
<div class="content" style="display: none;">
<p>Our DMCA course will help you preparing to</p>
</div>
</div>
<div class="set">
<a href="javascript:void(0)">
What skills will you learn?
<i class="fa fa-plus"></i>
</a>
<div class="content">
<p>Acquire a comprehensive understanding of different digital marketing disciplines,</p>
</div>
</div>
</div>
.accordion-container{
position: relative;
max-width: 100%;
width: 100%;
float: left;
}
.accordion-container > h2{
text-align: center;
color: #fff;
padding-bottom: 5px;
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 1px solid #fff;
}
.set{
position: relative;
width: 100%;
height: auto;
background-color: #f1f5f7;
box-shadow: 0 5px 1px -3px rgba(0,0,0,.15);
-webkit-box-shadow: 0 5px 1px -3px rgba(0,0,0,.15);
-moz-box-shadow: 0 5px 1px -3px rgba(0,0,0,.15);
-ms-box-shadow: 0 5px 1px -3px rgba(0,0,0,.15);
margin-bottom: 10px;
}
.set > a{
display: block;
font-size: 18px;
padding: 18px 30px;
font-family: var(--font-family);
text-decoration: none;
color: #282828;
font-weight: 500;
border-bottom: 1px solid #fff;
-webkit-transition:all 0.2s linear;
-moz-transition:all 0.2s linear;
transition:all 0.2s linear;
}
.set > a i{
float: right;
margin-top: 2px;
}
.set > a.active{
background:linear-gradient(to right,rgba(230,90,23,1) 0,rgba(236,138,37,1) 100%);
color: #fff;
}
.set .content{
background-color: #fff;
border-bottom: 1px solid #ddd;
display:none;
}
.set .content p{
padding: 10px 15px;
margin: 0;
color: #333;
}
$(".set > a").on("click", function() {
if ($(this).hasClass("active")) {
$(this).removeClass("active");
$(this)
.siblings(".set .content")
.slideUp(200);
$(".set > a i")
.removeClass("fa-minus")
.addClass("fa-plus");
} else {
$(".set > a i")
.removeClass("fa-minus")
.addClass("fa-plus");
$(this)
.find("i")
.removeClass("fa-plus")
.addClass("fa-minus");
$(".set > a").removeClass("active");
$(this).addClass("active");
$(".set .content").slideUp(200);
$(this)
.siblings(".set .content")
.slideDown(200);
}
});
