"Bootstrap FAQ accordion"
Bootstrap 3.0.0 Snippet by creativealex

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container-fluid inner-container" > <div class="col-md-12"> <h1 class="main-heading">FAQ</h1> <div class="about-page-content testimonial-page"> <div class="faq-content"> <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab"> <h4 class="panel-title"> <a class="" role="button" data-toggle="collapse" data-parent="#accordion" href="#faq1"> <span>What is Manage Booking?</span> </a> </h4> </div> <div id="faq1" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> <div class="panel-body"> Quis autem velum iure reprehe nderit. Lorem ipsum dolor sit amet, consectetur adipis neque, bibendum in sagittis. Duis varius tellus eget massa. Quis autem velum iure reprehe nderit. Lorem ipsum dolor sit amet, consectetur adipis neque, bibendum in sagittis. Duis varius tellus eget massa. Quis autem velum iure reprehe nderit. Lorem ipsum dolor sit amet, consectetur adipis neque,varius tellus eget massa. Quis autem velum iure reprehe nderit. Lorem ipsum dolor sit amet, consectetur adipis neque, bibendum in sagittis. Duis varius tellus eget massa. Quis autem velum iure reprehe nderit. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#faq2"> <span>How do I benefit from using Manage Booking?</span> </a> </h4> </div> <div id="faq2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> <div class="panel-body"> Quis autem velum iure reprehe nderit. Lorem ipsum dolor sit amet, consectetur adipis neque, bibendum in sagittis. Duis varius tellus eget massa. Quis autem velum iure reprehe nderit. Lorem ipsum dolor sit amet, consectetur adipis neque, bibendum in sagittis. Duis varius tellus eget massa. Quis autem velum iure reprehe nderit. Lorem ipsum dolor sit amet, consectetur adipis neque,varius tellus eget massa. Quis autem velum iure reprehe nderit. Lorem ipsum dolor sit amet, consectetur adipis neque, bibendum in sagittis. Duis varius tellus eget massa. Quis autem velum iure reprehe nderit. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#faq3"> <span>Who can use Manage Booking?</span> </a> </h4> </div> <div id="faq3" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> <div class="panel-body"> Quis autem velum iure reprehe nderit. Lorem ipsum dolor sit amet, consectetur adipis neque, bibendum in sagittis. Duis varius tellus eget massa. Quis autem velum iure reprehe nderit. Lorem ipsum dolor sit amet, consectetur adipis neque, bibendum in sagittis. Duis varius tellus eget massa. Quis autem velum iure reprehe nderit. Lorem ipsum dolor sit amet, consectetur adipis neque,varius tellus eget massa. Quis autem velum iure reprehe nderit. Lorem ipsum dolor sit amet, consectetur adipis neque, bibendum in sagittis. Duis varius tellus eget massa. Quis autem velum iure reprehe nderit. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#faq4"> <span>Can multiple Debit / Credit cards be used on Manage Booking?</span> </a> </h4> </div> <div id="faq4" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> <div class="panel-body"> Quis autem velum iure reprehe nderit. Lorem ipsum dolor sit amet, consectetur adipis neque, bibendum in sagittis. Duis varius tellus eget massa. Quis autem velum iure reprehe nderit. Lorem ipsum dolor sit amet, consectetur adipis neque, bibendum in sagittis. Duis varius tellus eget massa. Quis autem velum iure reprehe nderit. Lorem ipsum dolor sit amet, consectetur adipis neque,varius tellus eget massa. Quis autem velum iure reprehe nderit. Lorem ipsum dolor sit amet, consectetur adipis neque, bibendum in sagittis. Duis varius tellus eget massa. Quis autem velum iure reprehe nderit. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#faq5"> <span>Which bookings can I use to access the Manage Booking facility?</span> </a> </h4> </div> <div id="faq5" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> <div class="panel-body"> Quis autem velum iure reprehe nderit. Lorem ipsum dolor sit amet, consectetur adipis neque, bibendum in sagittis. Duis varius tellus eget massa. Quis autem velum iure reprehe nderit. Lorem ipsum dolor sit amet, consectetur adipis neque, bibendum in sagittis. Duis varius tellus eget massa. Quis autem velum iure reprehe nderit. Lorem ipsum dolor sit amet, consectetur adipis neque,varius tellus eget massa. Quis autem velum iure reprehe nderit. Lorem ipsum dolor sit amet, consectetur adipis neque, bibendum in sagittis. Duis varius tellus eget massa. Quis autem velum iure reprehe nderit. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#faq6"> <span>If I update my booking through the Manage Booking facility, how do I know that the changes have been stored in my booking?</span> </a> </h4> </div> <div id="faq6" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> <div class="panel-body"> Quis autem velum iure reprehe nderit. Lorem ipsum dolor sit amet, consectetur adipis neque, bibendum in sagittis. Duis varius tellus eget massa. Quis autem velum iure reprehe nderit. Lorem ipsum dolor sit amet, consectetur adipis neque, bibendum in sagittis. Duis varius tellus eget massa. Quis autem velum iure reprehe nderit. Lorem ipsum dolor sit amet, consectetur adipis neque,varius tellus eget massa. Quis autem velum iure reprehe nderit. Lorem ipsum dolor sit amet, consectetur adipis neque, bibendum in sagittis. Duis varius tellus eget massa. Quis autem velum iure reprehe nderit. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#faq7"> <span>Can I change my origin and destination through the Manage Booking facility?</span> </a> </h4> </div> <div id="faq7" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> <div class="panel-body"> Quis autem velum iure reprehe nderit. Lorem ipsum dolor sit amet, consectetur adipis neque, bibendum in sagittis. Duis varius tellus eget massa. Quis autem velum iure reprehe nderit. Lorem ipsum dolor sit amet, consectetur adipis neque, bibendum in sagittis. Duis varius tellus eget massa. Quis autem velum iure reprehe nderit. Lorem ipsum dolor sit amet, consectetur adipis neque,varius tellus eget massa. Quis autem velum iure reprehe nderit. Lorem ipsum dolor sit amet, consectetur adipis neque, bibendum in sagittis. Duis varius tellus eget massa. Quis autem velum iure reprehe nderit. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#faq8"> <span>Which bookings can I use to cancel/refund on Manage Booking facility?</span> </a> </h4> </div> <div id="faq8" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> <div class="panel-body"> Quis autem velum iure reprehe nderit. Lorem ipsum dolor sit amet, consectetur adipis neque, bibendum in sagittis. Duis varius tellus eget massa. Quis autem velum iure reprehe nderit. Lorem ipsum dolor sit amet, consectetur adipis neque, bibendum in sagittis. Duis varius tellus eget massa. Quis autem velum iure reprehe nderit. Lorem ipsum dolor sit amet, consectetur adipis neque,varius tellus eget massa. Quis autem velum iure reprehe nderit. Lorem ipsum dolor sit amet, consectetur adipis neque, bibendum in sagittis. Duis varius tellus eget massa. Quis autem velum iure reprehe nderit. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#faq9"> <span>How many times can I make use of Manage Booking?</span> </a> </h4> </div> <div id="faq9" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> <div class="panel-body"> Quis autem velum iure reprehe nderit. Lorem ipsum dolor sit amet, consectetur adipis neque, bibendum in sagittis. Duis varius tellus eget massa. Quis autem velum iure reprehe nderit. Lorem ipsum dolor sit amet, consectetur adipis neque, bibendum in sagittis. Duis varius tellus eget massa. Quis autem velum iure reprehe nderit. Lorem ipsum dolor sit amet, consectetur adipis neque,varius tellus eget massa. Quis autem velum iure reprehe nderit. Lorem ipsum dolor sit amet, consectetur adipis neque, bibendum in sagittis. Duis varius tellus eget massa. Quis autem velum iure reprehe nderit. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#faq10"> <span>How many times can I make use of Manage Booking?</span> </a> </h4> </div> <div id="faq10" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> <div class="panel-body"> Quis autem velum iure reprehe nderit. Lorem ipsum dolor sit amet, consectetur adipis neque, bibendum in sagittis. Duis varius tellus eget massa. Quis autem velum iure reprehe nderit. Lorem ipsum dolor sit amet, consectetur adipis neque, bibendum in sagittis. Duis varius tellus eget massa. Quis autem velum iure reprehe nderit. Lorem ipsum dolor sit amet, consectetur adipis neque,varius tellus eget massa. Quis autem velum iure reprehe nderit. Lorem ipsum dolor sit amet, consectetur adipis neque, bibendum in sagittis. Duis varius tellus eget massa. Quis autem velum iure reprehe nderit. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#faq11"> <span>Until what time, can I cancel/ refund my booking online?</span> </a> </h4> </div> <div id="faq11" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> <div class="panel-body"> Quis autem velum iure reprehe nderit. Lorem ipsum dolor sit amet, consectetur adipis neque, bibendum in sagittis. Duis varius tellus eget massa. Quis autem velum iure reprehe nderit. Lorem ipsum dolor sit amet, consectetur adipis neque, bibendum in sagittis. Duis varius tellus eget massa. Quis autem velum iure reprehe nderit. Lorem ipsum dolor sit amet, consectetur adipis neque,varius tellus eget massa. Quis autem velum iure reprehe nderit. Lorem ipsum dolor sit amet, consectetur adipis neque, bibendum in sagittis. Duis varius tellus eget massa. Quis autem velum iure reprehe nderit. </div> </div> </div> </div> </div> </div> </div> </div>
.faq-content #accordion .panel-title > a.accordion-toggle::before, .faq-content #accordion a[data-toggle="collapse"]::before { content:"−"; float: left; font-family: 'Glyphicons Halflings'; margin-right :1em; margin-left:10px; color:#fff; font-size:13px; font-weight:300; display:inline-block; width:20px; height:20px; line-height:20px; border-radius:50%; text-align:center; font-size:10px; background:#ff9900; } .faq-content #accordion .panel-title > a.accordion-toggle.collapsed::before, .faq-content #accordion a.collapsed[data-toggle="collapse"]::before { content:"+"; color:#fff; font-size:10px; font-weight:300; background:#333; } .faq-content{float:left; width:100%;} .faq-content .panel-heading{padding-left:0px; border-radius:0px !important;} .faq-content .panel-heading a{text-decoration:none;} .faq-content .panel{border-radius:0px !important;} .faq-content .panel-default{} .faq-content .panel-heading{background:#f3f3f3 !important; color:#666666;} .faq-content .panel-body{font-size:14px; color:#666666;} .faq-saelect{background:#f3f3f3; padding:15px; border-bottom:2px solid #666666; float:left; width:100%; margin-bottom:20px; margin-top:-10px;} .faq-saelect span{font-size:16px; color:#333; margin-right:20px;} .faq-saelect select{border:1px solid #dcdcdc; color:#999999; width:300px; height:40px;} .faq-content .panel{border-top:none !important; border-right:none !important; border-left:none !important;} .faq-content .panel-body{border:1px solid #f3f3f3;}

Related: See More


Questions / Comments: