"FAQ Accordian slider + ravi"
Bootstrap 4.1.1 Snippet by ravi7284007

<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="container"> <h1 class="pt-3 text-center mb-3">FAQ Accordian slider</h1> <div class="accordion " id="accordionExample"> <div class="card"> <div class="card-header" id="headingOne"> <h2 class="mb-0"> <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#p__detail" aria-expanded="true" aria-controls="p__detail"> Do I have to register at synergy consulting group </button> </h2> </div> <div id="p__detail" class="collapse " aria-labelledby="headingOne" data-parent="#accordionExample"> <div class="card-body"> <p>Yes</p> </div> </div> </div> <div class="card"> <div class="card-header" id="headingTwo"> <h2 class="mb-0"> <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#size__and__fit" aria-expanded="false" aria-controls="size__and__fit"> How do I register? </button> </h2> </div> <div id="size__and__fit" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample"> <div class="card-body">You can register yourself by clicking on this Registration Link. Once subscribed, you can enjoy regular updates and services from synergy consulting group. </div> </div> </div> <div class="card"> <div class="card-header" id="headingThree"> <h2 class="mb-0"> <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#fabric__comp" aria-expanded="false" aria-controls="fabric__comp"> Do I have to disclose my Email & Phone Number for Registration? </button> </h2> </div> <div id="fabric__comp" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample"> <div class="card-body">Yes. This ensures a secure from your end. </div> </div> </div> <div class="card"> <div class="card-header" id="headingThree"> <h2 class="mb-0"> <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#return__policy" aria-expanded="false" aria-controls="return__policy"> Is my Personal Information secure at synergy consulting group </button> </h2> </div> <div id="return__policy" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample"> <div class="card-body">Yes. Please see our Privacy Policy to know more. </div> </div> </div> </div> </div>
.accordion { border: 1px solid #002247; } .accordion h3 { background-color: #f3e9eb; color: #222; font-size: 16px; text-align: center; margin: 0; padding: 10px; } .accordion .card-header { padding: 0; } .accordion .card-header button { text-align: left; display: block; width: 100%; font-size: 18px; color: #000000; position: relative; } .accordion .card-header button.collapsed::after { position: absolute; width: 2px; height: 12px; content: ''; background-color: #000; right: 12px; top: 54%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .accordion .card-header button::before { position: absolute; width: 12px; height: 2px; content: ''; background-color: #000; right: 7px; top: 50%; } .accordion .card-header button:hover { text-decoration: none; } .accordion .card-header button i { float: right; margin-top: 3px; } .accordion .card-body { padding: 15px; font-size: 16px; } .accordion .card-body table { margin: 0; } .accordion .card-body table a { color: #000; } .accordion .card-body table span { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; } .accordion ul.occasion_list a { padding: 5px 15px; color: #222; font-size: 14px; display: inline-block; } .accordion ul.occasion_list a:hover { color: #002247; }

Related: See More


Questions / Comments: