"FAQ with Categories"
Bootstrap 3.3.0 Snippet by instabilsoul

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 id="top-bar"> <div id="top-bar-inside"> <div id="logo"> <div class="logobox-bl"> <div class="logobox-br"> <a href="/"><img src="../../Content/Images/logo.png" alt="Elklan"></a> </div> </div> </div> <div id="top-links"><a href="/Enrollment/Index">HOME</a> | <a href="/Account/LogOut">LOG OUT</a><span id="tutor-view-link" style="display: none;"> | <a href="/tutor/index">TUTOR VIEW</a></span></div> </div> </div> <div class="container"> <div class="row"> <div class="col-md-6 col-md-offset-3"> <!-- Nav tabs category --> <ul class="nav nav-tabs faq-cat-tabs"> <li class="active"><a href="#faq-cat-1" data-toggle="tab">The basics</a> </li> <li><a href="#faq-cat-2" data-toggle="tab">Completing Tasks</a> </li> <li><a href="#faq-cat-3" data-toggle="tab">Troubleshooting</a> </li> <li><a href="#faq-cat-4" data-toggle="tab">Contact us</a> </li> </ul> <!-- Tab panes --> <div class="tab-content faq-cat-content"> <div class="tab-pane active in fade" id="faq-cat-1"> <div class="panel-group" id="accordion-cat-1"> <div class="panel panel-default panel-faq"> <div class="panel-heading"> <a data-toggle="collapse" data-parent="#accordion-cat-1" href="#faq-cat-1-sub-1"> <h4 class="panel-title"> Log in difficulties <span class="pull-right"><i class="glyphicon glyphicon-plus"></i></span> </h4> </a> </div> <div id="faq-cat-1-sub-1" class="panel-collapse collapse"> <div class="panel-body"> Log in details are set up at either your tutor or your request. You will be sent a username and a password along with instructions via email, both the username and password are case sensitive. If you have entered them correctly and still are unable to log in please fill in the ‘submit a ticket’ under the ‘Contact us’ tab or you can call or email us via the contact information under the ‘Contact us’ tab. </div> </div> </div> <div class="panel panel-default panel-faq"> <div class="panel-heading"> <a data-toggle="collapse" data-parent="#accordion-cat-1" href="#faq-cat-1-sub-2"> <h4 class="panel-title"> I want to change my level <span class="pull-right"><i class="glyphicon glyphicon-plus"></i></span> </h4> </a> </div> <div id="faq-cat-1-sub-2" class="panel-collapse collapse"> <div class="panel-body"> All users are set to level 3 to start with, if you wish to be changed to a level 2 please fill in the ‘submit a ticket’ under the ‘Contact us’ tab or you can call or email us via the contact information under the ‘Contact us’ tab. </div> </div> </div> </div> </div> <div class="tab-pane fade" id="faq-cat-2"> <div class="panel-group" id="accordion-cat-2"> <div class="panel panel-default panel-faq"> <div class="panel-heading"> <a data-toggle="collapse" data-parent="#accordion-cat-2" href="#faq-cat-2-sub-1"> <h4 class="panel-title"> Getting started – A video introduction to your e-portfolio <span class="pull-right"><i class="glyphicon glyphicon-plus"></i></span> </h4> </a> </div> <div id="faq-cat-2-sub-1" class="panel-collapse collapse"> <div class="panel-body"> Please watch the video below. The video covers logging in all the way through to submitting your work. <br> <br> <iframe class="Vimeo-video" src="//player.vimeo.com/video/98343437" width="600" height="350" frameborder="5" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> </div> </div> </div> <div class="panel panel-default panel-faq"> <div class="panel-heading"> <a data-toggle="collapse" data-parent="#accordion-cat-2" href="#faq-cat-2-sub-2"> <h4 class="panel-title"> Uploading files to a task <span class="pull-right"><i class="glyphicon glyphicon-plus"></i></span> </h4> </a> </div> <div id="faq-cat-2-sub-2" class="panel-collapse collapse"> <div class="panel-body"> You can upload office files and images to support any of the tasks in the e-portfolio. To upload a file click the Upload button(A) located in the bottom left of the task screen. Locate the file on your computer, select it and click open or okay(B). An icon displaying the file type(C) will appear if your upload was successful. <br> <br> <img class="centeredImage" src="upload.jpg" width="680px" height="380px"> <br>If you are having difficulty uploading documents please read the guide 'My files/images won’t upload' under the 'Troubleshooting' tab above. </div> </div> </div> </div> </div> <div class="tab-pane fade" id="faq-cat-3"> <div class="panel-group" id="accordion-cat-3"> <div class="panel panel-default panel-faq"> <div class="panel-heading"> <a data-toggle="collapse" data-parent="#accordion-cat-3" href="#faq-cat-3-sub-1"> <h4 class="panel-title"> My files/images won’t upload <span class="pull-right"><i class="glyphicon glyphicon-plus"></i></span> </h4> </a> </div> <div id="faq-cat-3-sub-1" class="panel-collapse collapse"> <div class="panel-body"> If you are having difficulties uploading files, please check the file size. If your file is more than 5MB (5,000kb) it will not be accepted. Below we have a guide to resizing images(if a word document is too large, resize the images before putting them into the document). Please click the image below and follow the instructions. <br> <br> <a href="Image_size_change.pdf" download><img class="centeredImage" src="Adobe_PDF_icon.png" width="100px" height="100px"></a> </div> </div> </div> <div class="panel panel-default panel-faq"> <div class="panel-heading"> <a data-toggle="collapse" data-parent="#accordion-cat-3" href="#faq-cat-3-sub-2"> <h4 class="panel-title"> My tutor can’t see my work <span class="pull-right"><i class="glyphicon glyphicon-plus"></i></span> </h4> </a> </div> <div id="faq-cat-3-sub-2" class="panel-collapse collapse"> <div class="panel-body"> When you log in you will see the home screen as below. If you have submitted the session to your tutor the lock icon will be shown(A). If your tutor can't see your name for marking please contact us via email, phone or the 'Submit a ticket'. Please make sure to give your tutors name and if you have it, the course code. <br> <br> <img class="centeredImage" src="submit.jpg" width="600px" height="380px"> <br> </div> </div> </div> <div class="panel panel-default panel-faq"> <div class="panel-heading"> <a data-toggle="collapse" data-parent="#accordion-cat-3" href="#faq-cat-3-sub-3"> <h4 class="panel-title"> I having trouble completing the ‘pop-up’ tasks and interactive tasks <span class="pull-right"><i class="glyphicon glyphicon-plus"></i></span> </h4> </a> </div> <div id="faq-cat-3-sub-3" class="panel-collapse collapse"> <div class="panel-body"> Not to worry, there a few things to check: <ul><li>Are you using a mobile device? The communication chain task(Session 1 task - 1.1) will not work without flash e.g. IOS devices.</li> <li>Is your browser out of date? Some older versions of Internet Explorer aren't supported, try using Mozilla firefox or google chrome.</li> </ul> If you still can't get them to work,please contact us via email, phone or the 'Submit a ticket'. Please make sure to state the task you are having difficulty with. </div> </div> </div> </div> </div> <div class="tab-pane fade" id="faq-cat-4"> <div class="panel-group" id="accordion-cat-4"> <div class="panel panel-default panel-faq"> <div class="panel-heading"> <a data-toggle="collapse" data-parent="#accordion-cat-4" href="#faq-cat-4-sub-1"> <h4 class="panel-title"> Email <span class="pull-right"><i class="glyphicon glyphicon-plus"></i></span> </h4> </a> </div> <div id="faq-cat-4-sub-1" class="panel-collapse collapse"> <div class="panel-body"> If you wish to contact us via email please use the address below. If you quiery is with your account please make sure to put your username in the email. <br> <br> <a href="mailto:info@elklan.co.uk?Subject=Elklan%20e-portfolio" target="_top">Info@elklan.co.uk</a> <br> </div> </div> </div> <div class="panel panel-default panel-faq"> <div class="panel-heading"> <a data-toggle="collapse" data-parent="#accordion-cat-4" href="#faq-cat-4-sub-2"> <h4 class="panel-title"> Phone <span class="pull-right"><i class="glyphicon glyphicon-plus"></i></span> </h4> </a> </div> <div id="faq-cat-4-sub-2" class="panel-collapse collapse"> <div class="panel-body"> Our office hours are between 9am and 5pm Monday to Friday. If you quiery is with your account please have your account details ready. <br> <br>Tel: 01208 841450 </div> </div> </div> <div class="panel panel-default panel-faq"> <div class="panel-heading"> <a data-toggle="collapse" data-parent="#accordion-cat-4" href="#faq-cat-4-sub-3"> <h4 class="panel-title"> Submit a ticket <span class="pull-right"><i class="glyphicon glyphicon-plus"></i></span> </h4> </a> </div> <div id="faq-cat-4-sub-3" class="panel-collapse collapse"> <div class="panel-body-form"> <div class="col-md-8"> <div class="well well-sm"> <form action="FAQ.php" method="post" enctype="text/plain"> <div class="row"> <div class="col-md-6"> <div class="form-group"> <label for="name"> Name</label> <input type="text" class="form-control" id="name" placeholder="Enter name" required="required" /> </div> <div class="form-group"> <label for="email"> Email Address</label> <div class="input-group"> <span class="input-group-addon"><span class="glyphicon glyphicon-envelope" style="color:black"></span> </span> <input type="email" class="form-control" id="email" placeholder="Enter email" required="required" /> </div> </div> <div class="form-group"> <label for="subject"> Subject</label> <select id="subject" name="subject" class="form-control" required="required"> <option value="na" selected="">Choose One:</option> <option value="log-in">Log in</option> <option value="General">General question</option> <option value="level">Level change</option> <option value="Other">Other</option> </select> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="name"> Message</label> <textarea name="message" id="message" class="form-control" rows="9" cols="25" required="required" placeholder="Message"></textarea> </div> </div> <div class="col-md-12"> <button type="submit" class="btn btn-primary pull-right" id="btnContactUs" onclick="window.location.href = 'FAQ.php'"> Send Message</button> </div> </div> </form> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>
body { padding-top: 30px; } top-bar { color: #4c4c4c; position: absolute; /*min-width: 1000px;*/ top: 0px; z-index: 0; width: 100%; font-size: 11px; padding: 10px 0 0 0; height: 110px; background: url(www.elklaneportfolio.co.uk/ftp64692133-4/Content/Images/top_bar.png) top left repeat-x; } #top-bar a { color: #4C4C4C; text-decoration: none; } .faq-cat-content { margin-top: 25px; } .faq-cat-tabs li a { padding: 15px 10px 15px 10px; background-color: #fbbc2d; border: 2px solid #dddddd; color: #000000; } .nav-tabs li a:hover { background-color: #333333; color: #ffffff; } .panel-heading a:focus { outline: none; } .panel-heading a { color: #000000; } .panel-heading a:hover { color: #ffffff; } .panel-heading a:focus { text-decoration: none; color: #ffffff; } .faq-cat-content .panel-heading { background-color: #fbbc2d; } .faq-cat-content .panel-heading:hover { background-color: #333333; } .active-faq { border: 6px; } .panel-faq .panel-heading .panel-title span { font-size: 13px; font-weight: normal; } .panel-body { background-color: #333333; color: #ffffff; } .nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus { background-color: #333333; color: #ffffff; } .jumbotron { background: #358CCE; color: #000000; border-radius: 0px; } .jumbotron-sm { padding-top: 24px; padding-bottom: 24px; } .jumbotron small { color: #000000; } .h1 small { font-size: 24px; } .panel-body-form { color: #ffffff; background-color: #333333; } .panel { background-color: #333333; } .well { background-color: #333333; border-color: #333333; } .btn-primary { color: #333; background-color: #fbbc2d; border-color: #333333; } .btn-primary:hover { color: #ffffff; background-color: #333333; border: 2px solid #fbbc2d; } .Vimeo-video { display: block; margin: auto; } .centeredImage { display: block; margin: auto; }
$(document).ready(function() { $('.collapse').on('show.bs.collapse', function() { var id = $(this).attr('id'); $('a[href="#' + id + '"]').closest('.panel-heading').addClass('active-faq'); $('a[href="#' + id + '"] .panel-title span').html('<i class="glyphicon glyphicon-minus"></i>'); }); $('.collapse').on('hide.bs.collapse', function() { var id = $(this).attr('id'); $('a[href="#' + id + '"]').closest('.panel-heading').removeClass('active-faq'); $('a[href="#' + id + '"] .panel-title span').html('<i class="glyphicon glyphicon-plus"></i>'); }); });

Related: See More


Questions / Comments: