API Explorer NEW

by grafixguy76

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.js"></script>
     <div class="container">
     <div class="row">
     <div class="col-md-12">
     <h1 class="intro">
     API Explorer <span class="lead">Start by choosing a domain below</span>
     </h1>
     </div>
     </div>
     <div class="row">
     <div class="col-md-12">
     <div class="card" style="border:1px solid #7f169f;">
     <h4 class="card-header" style="background:#7f169f;color:#ffffff;font-style: normal;">Benefits Domain APIs</h4>
 <div class="card-block">
 
 
     <h6 class="card-title">Summary</h6>
     <p class="card-text">
       The Benefits domain includes information related to current and future employee benefit enrollment. This includes medical enrollment information, flexible spending contribution amounts, retirement contributions and more.
     </p>
          <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#domain1">Show APIs by group</button>
    
    <!-- accordion -->
  
  <div id="domain1" class="collapse">
<!-- inside accordion -->
 
<div class="row">
<div class="col-sm-12">

<div class="card">
  <h5 class="card-header" style="color:#7f169f">Benefits</h5>
  <div class="card-block">
    <h4 class="card-title">Benefit Management</h4>
    <p class="card-text">Participant Benefit Elections is the list of elections made by a participant for organization provided benefits. This specification details the Election Summary which is a list of health and welfare benefits Elections which the participant has (in force and future), and the Election Detail which gives the details of a particular benefit election.</p>
    
    <button type="button" class="btn btn-primary" data-toggle="collapse"...

CSS

html,body {
	height:100%;
}
      
.row-flex, .row-flex > div[class*='col-'] {  
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex:1 1 auto;
}

.row-flex-wrap {
	-webkit-flex-flow: row wrap;
    align-content: flex-start;
    flex:0;
}

.row-flex > div[class*='col-'], .container-flex > div[class*='col-'] {
	 margin:-.2px; /* hack adjust for wrapping */
}

.container-flex > div[class*='col-'] div,.row-flex > div[class*='col-'] div {
	width:100%;
}


.flex-col {
    display: flex;
    display: -webkit-flex;
    flex: 1 100%;
	flex-flow: column nowrap;
}

.flex-grow {
	display: flex;
    -webkit-flex: 2;
    flex: 2;
}

.modal-dialog {
  background: #ffffff;
  max-width: 65%;
  border-radius: 6px;
 
}

.collapse {
  margin-top: 25px;
 
}

.intro {
  margin-top:25px;
  margin-bottom: 25px;
}