<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 ----------> <section class="faq-wrap section-space"> <div class="container"> <div class="row align-items-center"> <div class="col-md-6 "> <div class="faq-title"> <h6>FAQ</h6> <h3>Keep Your Data Protected. Our Platform is certified</h3> </div> <div class="faq-accordion"> <div class="faq-accordion-item"> <div class="faq-accordion-title active"> <h3>Why are your career counsellors better than others?</h3> </div> <div class="faq-accordion-content" style="display: block; "> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel </p> </div> </div> <div class="faq-accordion-item"> <div class="faq-accordion-title"> <h3>Why are your career counsellors better than others?</h3> </div> <div class="faq-accordion-content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel </p> </div> </div> <div class="faq-accordion-item"> <div class="faq-accordion-title"> <h3>Why are your career counsellors better than others?</h3> </div> <div class="faq-accordion-content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel </p> </div> </div> </div> </div> <div class="col-md-6 "> <div class="faq-image "> <img src="images/faq.png " alt="faq " title="faq "> </div> </div> </div> </div> </section>

/* faq */ .faq-title h6 { font-size: 20px; color: #fb4e02; } .faq-title h3 { font-size: 31px; font-weight: 700; line-height: 1.2; } .faq-accordion-title h3 { color: #0071db; font-size: 16px; margin: 0px; line-height: 1; } .faq-accordion-title { padding: 20px 15px; padding-right: 40px; cursor: pointer; position: relative; } .faq-accordion-content { display: none; padding: 15px 15px 25px; background-color: #ffffff; z-index: 3; } .faq-accordion-item { box-shadow: 0px 0px 12px 5px #d7d7d7; margin-bottom: 20px; position: relative; background-color: #ffffff; border-radius: 2px; } .faq-accordion-title:after { content: ""; height: 19px; width: 2px; background-color: #0071db; position: absolute; top: calc(50% - 9px); right: 20px; } .faq-accordion-title:before { content: ""; height: 2px; width: 19px; background-color: #0071db; position: absolute; top: 50%; right: 12px; } .faq-accordion-title.active { background-color: #0071dc; } .faq-accordion-title.active h3 { color: #ffffff; } .faq-accordion-title.active:before { background-color: #ffffff; } .faq-accordion-title.active:after { opacity: 0; } .faq-title { margin-bottom: 30px; } .faq-accordion-content p { font-size: 16px; } .faq-accordion-content p:last-child { margin-bottom: 0px; } .faq-image img { max-width: 450px; width: 100%; } .faq-image { text-align: center; } .faq-wrap { background-image: url('../images/faq-background.jpg'); background-size: cover; background-position: center center; }

// Faq js $('.faq-accordion-title').click(function() { $(this).parent().siblings(".faq-accordion-item").find(".faq-accordion-title").removeClass("active"); $(this).parent().siblings(".faq-accordion-item").find(".faq-accordion-content").slideUp(250); $(this).toggleClass('active'); $(this).next().slideToggle(250); });