<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 class="left-panel"><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"> Accordion </a> </p> </div> <div id="collapse2api1" 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="#collapse2api2" aria-expanded="false"> Accordion Title 2 </a> </p> </div> <div id="collapse2api2" 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="#collapse2api3" aria-expanded="false"> Accordion Title 3 </a> </p> </div> <div id="collapse2api3" 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="#collapse2api4" aria-expanded="false"> Accordion Title 4 </a> </p> </div> <div id="collapse2api4" 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="#collapse2api5" aria-expanded="false"> Accordion Title 5 </a> </p> </div> <div id="collapse2api5" 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> <div class="col-md-3"> <div class="panel-group panel-group" id="accordion2Tertiary"> <div ><h4>Security</h4> <div class="panel-heading"> <p class="panel-title"> <a class="accordion-toggle" 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" 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" 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" 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" 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> </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> </div> <div class="col-md-3"> <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" 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" 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" 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" 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" 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> </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> </div> <div class="col-md-3"> <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" 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" 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" 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> </div> </div> <!-- end of 3rd Accordian-->

.col-md-3{ margin-left:150px; margin-bottom:30px; } .panel-title{ color:#0088cc; } .left-panel{ }