<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="row"> <div class="col-md-3"> <div class="panel-group panel-group" id="accordion2Primary"> <div ><h4>API Product</h4> <div class="panel-heading"> <p class="panel-title"> <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2Primary" href="#collapse2api1" aria-expanded="false"> What is your greatest strength? </a> </p> </div> <div id="collapse2api1" class="accordion-body collapse" aria-expanded="false" style="height: 0px;"> <div class="panel-body"> <p>This is one of the questions that employers almost always ask. When you are asked about your greatest strengths, it's important to discuss the attributes that will qualify you for the specific job and set you apart from the other candidates.</p> </div> </div> </div> <div > <div class="panel-heading"> <p class="panel-title"> <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2Primary" href="#collapse2api2" aria-expanded="false"> How should a page of FAQs be titled? </a> </p> </div> <div id="collapse2api2" class="accordion-body collapse" aria-expanded="false"> <div class="panel-body"> <p>It is LSE web style to title a page of FAQs 'Frequently asked questions (FAQs)'. While the abbreviation is in quite common usage this ensures that there can be no mistaking what they are.</p> </div> </div> </div> <div > <div class="panel-heading"> <p class="panel-title"> <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2Primary" href="#collapse2api3" aria-expanded="false"> How should questions for FAQs be formatted? </a> </p> </div> <div id="collapse2api3" class="accordion-body collapse" aria-expanded="false"> <div class="panel-body"> <p>All the questions should be numbered, bolded and listed at the top of the page. All the answers should be listed underneath, with the question repeated and also in bold. Each question at the top of the page should link to the corresponding question/ answer beneath it. There should also be a return to the top arrow after each question, aligned to the right of the page. If there are a lot of FAQs - more than 20, for example - it's a good idea to divide them into subcategories. As the name implies, FAQs should be written as proper questions, not statements.</p> </div> </div> </div> <div > <div class="panel-heading"> <p class="panel-title"> <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2Primary" href="#collapse2api4" aria-expanded="false"> Where can I find a good example of an FAQ? </a> </p> </div> <div id="collapse2api4" class="accordion-body collapse" aria-expanded="false"> <div class="panel-body"> <p>Have a look at the Frequently asked questions (FAQs) in the Non-Governmental Public Action section.</p> </div> </div> </div> <div > <div class="panel-heading"> <p class="panel-title"> <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2Primary" href="#collapse2api5" aria-expanded="false"> How do I gain access to your free PDFs? </a> </p> </div> <div id="collapse2api5" class="accordion-body collapse" aria-expanded="false"> <div class="panel-body"> <p>On the Research section of our website, you will see a link to our freely downloadable PDFs, as well as to many other free articles and presentations. For the PDFs, click on the publication you are interested in downloading, then scroll to the bottom of that item's page. Here, you will need to enter your e-mail address to validate that you are registered with the Worldwatch Institute website. If you are already registered, the download will begin. If you are not registered you will be given a link to the Worldwatch registration page. Once you have completed the registration form, you will have access to the complete library of free Worldwatch Institute publications in PDF format. </p> </div> </div> <div > <div class="panel-body"> <strong><a href="https://developer.yodlee.com/Faq_to_API_Product">View More</a></strong> </div> </div> </div> </div> </div> <div class="col-md-3" id="right-panel" > <div class="panel-group panel-group" id="accordion2Tertiary"> <div ><h4>Security</h4> <div class="panel-heading"> <p class="panel-title"> <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2Tertiary" href="#collapse2sec1" aria-expanded="false"> Accordion Title 1 </a> </p> </div> <div id="collapse2sec1" class="accordion-body collapse" aria-expanded="false"> <div class="panel-body"> <p>Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.</p> </div> </div> </div> <div > <div class="panel-heading"> <p class="panel-title"> <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2Tertiary" href="#collapse2sec2"> Accordion Title 2 </a> </p> </div> <div id="collapse2sec2" class="accordion-body collapse"> <div class="panel-body"> <p>Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.</p> </div> </div> </div> <div > <div class="panel-heading"> <p class="panel-title"> <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2Tertiary" href="#collapse2sec3"> Accordion Title 3 </a> </p> </div> <div id="collapse2sec3" class="accordion-body collapse"> <div class="panel-body"> <p>Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.</p> </div> </div> </div> <div > <div class="panel-heading"> <p class="panel-title"> <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2Tertiary" href="#collapse2sec4"> Accordion Title 4 </a> </p> </div> <div id="collapse2sec4" class="accordion-body collapse"> <div class="panel-body"> <p>Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.</p> </div> </div> </div> <div > <div class="panel-heading"> <p class="panel-title"> <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2Tertiary" href="#collapse2sec5"> Accordion Title 5 </a> </p> </div> <div id="collapse2sec5" class="accordion-body collapse"> <div class="panel-body"> <p>Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.</p> </div> </div> <div > <div class="panel-body"> <strong><a href="#">View More</a></strong> </div> </div> </div> </div> </div> </div> <!--end of 1st Accordian --> <div class="row"> <div class="col-md-3"> <div class="panel-group panel-group" id="accordion2Primary"> <div ><h4>Linking Accounts & FastLink</h4> <div class="panel-heading"> <p class="panel-title"> <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2Primary" href="#collapse2link1" aria-expanded="false"> Accordion </a> </p> </div> <div id="collapse2link1" class="accordion-body collapse" aria-expanded="false" style="height: 0px;"> <div class="panel-body"> <p>Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.</p> </div> </div> </div> <div > <div class="panel-heading"> <p class="panel-title"> <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2Primary" href="#collapse2link2" aria-expanded="false"> Accordion Title 2 </a> </p> </div> <div id="collapse2link2" class="accordion-body collapse" aria-expanded="false"> <div class="panel-body"> <p>Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.</p> </div> </div> </div> <div > <div class="panel-heading"> <p class="panel-title"> <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2Primary" href="#collapse2link3" aria-expanded="false"> Accordion Title 3 </a> </p> </div> <div id="collapse2link3" class="accordion-body collapse" aria-expanded="false"> <div class="panel-body"> <p>Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.</p> </div> </div> </div> <div > <div class="panel-heading"> <p class="panel-title"> <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2Primary" href="#collapse2link4" aria-expanded="false"> Accordion Title 4 </a> </p> </div> <div id="collapse2link4" class="accordion-body collapse" aria-expanded="false"> <div class="panel-body"> <p>Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.</p> </div> </div> </div> <div > <div class="panel-heading"> <p class="panel-title"> <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2Primary" href="#collapse2link5" aria-expanded="false"> Accordion Title 5 </a> </p> </div> <div id="collapse2link5" class="accordion-body collapse" aria-expanded="false"> <div class="panel-body"> <p>Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.</p> </div> </div> <div > <div class="panel-body"> <strong><a href="#">View More</a></strong> </div> </div> </div> </div> </div> <div class="col-md-3" id="right-panel"> <div class="panel-group panel-group" id="accordion2Tertiary"> <div ><h4>Transaction Data Enrichment (TDE)</h4> <div class="panel-heading"> <p class="panel-title"> <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2Tertiary" href="#collapse2tde1" aria-expanded="false"> Accordion Title 1 </a> </p> </div> <div id="collapse2tde1" class="accordion-body collapse" aria-expanded="false"> <div class="panel-body"> <p>Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.</p> </div> </div> </div> <div > <div class="panel-heading"> <p class="panel-title"> <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2Tertiary" href="#collapse2tde2"> Accordion Title 2 </a> </p> </div> <div id="collapse2tde2" class="accordion-body collapse"> <div class="panel-body"> <p>Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.</p> </div> </div> </div> <div > <div class="panel-heading"> <p class="panel-title"> <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2Tertiary" href="#collapse2tde3"> Accordion Title 3 </a> </p> </div> <div id="collapse2tde3" class="accordion-body collapse"> <div class="panel-body"> <p>Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.</p> </div> </div> </div> <div > <div class="panel-heading"> <p class="panel-title"> <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2Tertiary" href="#collapse2tde4"> Accordion Title 4 </a> </p> </div> <div id="collapse2tde4" class="accordion-body collapse"> <div class="panel-body"> <p>Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.</p> </div> </div> </div> <div > <div class="panel-heading"> <p class="panel-title"> <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2Tertiary" href="#collapse2tde5"> Accordion Title 5 </a> </p> </div> <div id="collapse2tde5" class="accordion-body collapse"> <div class="panel-body"> <p>Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.</p> </div> </div> <div > <div class="panel-body"> <strong><a href="#">View More</a></strong> </div> </div> </div> </div> </div> </div> <!--end of 2nd Accordian--> <div class="row"> <div class="col-md-3"> <div class="panel-group panel-group" id="accordion2Primary"> <div ><h4>Data</h4> <div class="panel-heading"> <p class="panel-title"> <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2Primary" href="#collapse2data1" aria-expanded="false"> Accordion </a> </p> </div> <div id="collapse2data1" class="accordion-body collapse" aria-expanded="false" style="height: 0px;"> <div class="panel-body"> <p>Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.</p> </div> </div> </div> <div > <div class="panel-heading"> <p class="panel-title"> <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2Primary" href="#collapse2data2" aria-expanded="false"> Accordion Title 2 </a> </p> </div> <div id="collapse2data2" class="accordion-body collapse" aria-expanded="false"> <div class="panel-body"> <p>Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.</p> </div> </div> </div> <div > <div class="panel-heading"> <p class="panel-title"> <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2Primary" href="#collapse2data3" aria-expanded="false"> Accordion Title 3 </a> </p> </div> <div id="collapse2data3" class="accordion-body collapse" aria-expanded="false"> <div class="panel-body"> <p>Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.</p> </div> </div> </div> <div > <div class="panel-heading"> <p class="panel-title"> <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2Primary" href="#collapse2data4" aria-expanded="false"> Accordion Title 4 </a> </p> </div> <div id="collapse2data4" class="accordion-body collapse" aria-expanded="false"> <div class="panel-body"> <p>Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.</p> </div> </div> </div> <div > <div class="panel-heading"> <p class="panel-title"> <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2Primary" href="#collapse2data5" aria-expanded="false"> Accordion Title 5 </a> </p> </div> <div id="collapse2data5" class="accordion-body collapse" aria-expanded="false"> <div class="panel-body"> <p>Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.</p> </div> </div> <div > <div class="panel-body"> <strong><a href="#">View More</a></strong> </div> </div> </div> </div> </div> <div class="col-md-3" id="right-panel"> <div class="panel-group panel-group" id="accordion2Tertiary"> <div ><h4>User & Account Management</h4> <div class="panel-heading"> <p class="panel-title"> <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2Tertiary" href="#collapse2user1" aria-expanded="false"> Accordion Title 1 </a> </p> </div> <div id="collapse2user1" class="accordion-body collapse" aria-expanded="false"> <div class="panel-body"> <p>Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.</p> </div> </div> </div> <div > <div class="panel-heading"> <p class="panel-title"> <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2Tertiary" href="#collapse2user2"> Accordion Title 2 </a> </p> </div> <div id="collapse2user2" class="accordion-body collapse"> <div class="panel-body"> <p>Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.</p> </div> </div> </div> <div > <div class="panel-heading"> <p class="panel-title"> <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2Tertiary" href="#collapse2user3"> Accordion Title 3 </a> </p> </div> <div id="collapse2user3" class="accordion-body collapse"> <div class="panel-body"> <p>Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.</p> </div> </div> </div> <div > <div class="panel-heading"> <p class="panel-title"> <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2Primary" href="#collapse2user4" aria-expanded="false"> Accordion Title 4 </a> </p> </div> <div id="collapse2user4" class="accordion-body collapse" aria-expanded="false"> <div class="panel-body"> <p>Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.</p> </div> </div> </div> <div > <div class="panel-heading"> <p class="panel-title"> <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2Primary" href="#collapse2user5" aria-expanded="false"> Accordion Title 5 </a> </p> </div> <div id="collapse2user5" class="accordion-body collapse" aria-expanded="false"> <div class="panel-body"> <p>Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.</p> </div> </div> <div > <div class="panel-body"> <strong><a href="#">View More</a></strong> </div> </div> </div> </div> </div> </div> <!-- end of 3rd Accordian--> <div class="row"> <div class="col-md-3"> <div class="panel-group panel-group" id="accordion2Primary"> <div ><h4>Building, Testing & Deploying</h4> <div class="panel-heading"> <p class="panel-title"> <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2Primary" href="#collapse2build1" aria-expanded="false"> Accordion </a> </p> </div> <div id="collapse2build1" class="accordion-body collapse" aria-expanded="false" style="height: 0px;"> <div class="panel-body"> <p>Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.</p> </div> </div> </div> <div > <div class="panel-heading"> <p class="panel-title"> <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2Primary" href="#collapse2build2" aria-expanded="false"> Accordion Title 2 </a> </p> </div> <div id="collapse2build2" class="accordion-body collapse" aria-expanded="false"> <div class="panel-body"> <p>Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.</p> </div> </div> </div> <div > <div class="panel-heading"> <p class="panel-title"> <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2Primary" href="#collapse2build3" aria-expanded="false"> Accordion Title 3 </a> </p> </div> <div id="collapse2build3" class="accordion-body collapse" aria-expanded="false"> <div class="panel-body"> <p>Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.</p> </div> </div> </div> <div > <div class="panel-heading"> <p class="panel-title"> <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2Primary" href="#collapse2build4" aria-expanded="false"> Accordion Title 4 </a> </p> </div> <div id="collapse2build4" class="accordion-body collapse" aria-expanded="false"> <div class="panel-body"> <p>Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.</p> </div> </div> </div> <div > <div class="panel-heading"> <p class="panel-title"> <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2Primary" href="#collapse2build5" aria-expanded="false"> Accordion Title 5 </a> </p> </div> <div id="collapse2build5" class="accordion-body collapse" aria-expanded="false"> <div class="panel-body"> <p>Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.</p> </div> </div> <div > <div class="panel-body"> <strong><a href="#">View More</a></strong> </div> </div> </div> </div> </div> </div> <!--end of 4th Accordian--> <style> a.accordion-toggle.on{ color:#000000; } #right-panel{ margin-left:300px; float:left; } .col-md-3{ margin-bottom:20px; } p{ color:#000000; } h4{ white-space: nowrap; } a.accordion-toggle.collapsed:hover{ text-decoration:underline;} .panel-group{ display:inline-block; } .panel-title{ white-space:nowrap;} </style> <script> jQuery(document).ready(function($){ $( function() { $('.accordion-toggle').click( function() { $(this).toggleClass('on'); } ) }); }); </script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>