<table class="multiAccount">
  <tr>
    <th>Account #</th>
    <th>Order #</th>
    <th>Current Status (Ongoing)</th>
   
  </tr>
  <tr>
    <td valign="top"><span class="closedArrow">5822412</span></td>
    <td valign="top" class="collapsed"><ol class="steps">
		<li>
				<div class="num green"><b>1</b></div>
		</li>
		<li>
				<div class="num green"><b>2</b></div>
		</li>
		<li class="open">
				<div class="wrap">
						<div class="num grey"><b>3</b></div>
						<p><span>Order Provisioning</span><span>Done: 08/25/2014</span></p>
				</div>
		</li>
		<li class="closed">
				<div class="num"><b>4</b></div>
		</li>
		<li class="closed">
				<div class="num last"><b>5</b></div>
		</li>
</ol></td>
   
   
   
   
   
   
   
   
   
   <td colspan="2" class="expanded">
  <ol class="steps">
		<li class="open">
				<div class="wrap">
						<div class="num green"><b>1</b></div>
						<p><span>Order Provisioning</span><span>Done: 08/25/2014</span></p>
				</div>
		</li>
		<li class="open">
				<div class="wrap">
						<div class="num green"><b>2</b></div>
						<p><span>Order Provisioning</span><span>Done: 08/25/2014</span></p>
				</div>
		</li>
		<li class="open">
				<div class="wrap">
						<div class="num grey"><b>3</b></div>
						<p><span>Order Provisioning</span><span>Done: 08/25/2014</span></p>
				</div>
		</li>
		<li class="open">
				<div class="wrap">
						<div class="num black"><b>4</b></div>
						<p><span>Order Provisioning</span><span>Done: 08/25/2014</span></p>
				</div>
		</li>
		<li class="open">
				<div class="wrap">
						<div class="num black last"><b>5</b></div>
						<p><span>Order Provisioning</span><span>Done: 08/25/2014</span></p>
				</div>
		</li>
</ol>
<div class="tableDiv">
<div><span>Order No. <b>5822412</b></span><span>Account Name: <b>Mead O'Brien</b></span><span> Services: <b>UNE POTS/T-1</b></span><span class="last"> Services: <b>UNE POTS/T-1</b></span></div>
  <div><span class="last">Installation Address: <b>1217 W Capitol Ave,  Little Rock, AR 72201</b></span></div>
  <div><span>Project Coordinator: <b>John Smith</b>   </span><span> Phone:<b> 501-375-3719 </b> </span><span class="last">  Email:  <b>jsmith@company.com</b> </span></div>
  
  <div>
  </td>
  </tr>
  
  
  
  
  
</table>
.multiAccount th{background-color: #e4e4e4;
text-align: center;
padding: 5px;}
.multiAccount .first_row {background-color: #E4E4E4 !important;}
.multiAccount td {padding:5px;text-align: center;}
.tableDiv div {text-align:left; margin-bottom:10px;}
.tableDiv div span {padding-right:20px;}
.tableDiv div span:after{
    content: " | ";
	padding-left:20px;
}
.tableDiv div span.last:after {display:none;}
.closedArrow {background: url('http://is200.imagesocket.com/images/2014/10/29/2716484-3exx.png') no-repeat 1px 1px;
padding-left: 20px;padding-bottom: 10px;padding-top: 4px; cursor:pointer;}
.openArrow {background: url('http://is200.imagesocket.com/images/2014/10/29/2716483-0cvp.png') no-repeat 1px 1px;
padding-left: 20px;cursor:pointer;}
.multiAccount tr:nth-child(even) {
   /* background-color: #f2f2f2;*/
}
.multiAccount td:first-child {text-align:left !important; padding-left:10px !important;padding-top: 15px;}
.linkBack {float: right;
display: block;
width: 30%;text-align: right; text-decoration:none;color: #7dba00;}
h1.pageTitle {width: 70%;
float: left; }
.emailText {float: left;
width: 100%;
margin-top: 10px;
margin-bottom: 10px;}
.emailText input {margin-left:10px;}
.previousBtn {float: left;
width: 6%;
background: #7dba00;
color: #fff;
padding: 10px;
margin: 10px;
margin-left: 0;border-radius: 5px;}
.saveAllBtn {float: right;
text-align: right;
width: 6%;
background: #7dba00;
padding: 10px;
margin: 10px;
margin-right: 0px;
color: #fff;border-radius: 5px;}

/*CSS for steps*/
/* apply a natural box layout model to all elements */
*, *:before, *:after {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.steps {
	margin:0 0 20px;
	padding:0;
	list-style:none;
	overflow:hidden;
}

.green {background:#7dba00 !important; color: #666666 !important;}
.grey {color: #666666 !important;}
.open .green:after  {border-left-color: #7dba00 !important;}
.wrap .num.last:after {display:none}
.wrap .num.last:before {display:none}
.black {background:#000 !important; color:#fff!important;}
.open .black:after  {border-left-color: #000 !important; color:#fff!important;}
.steps li {float:left;position:relative;}
.wrap {float:left}
.num {
	width:30px;
	height:30px;
	line-height:30px;
	border-radius:50%;
	background:#7dba00;
	color:#000;
	font-weight:bold;
	text-align:center;
	float:left;
	position:relative;
	margin:0 4px 0 0;
}
.num b, .steps p span {position:relative;z-index:2; display:block;}
.num:after {
	content:" ";
	width: 0;
	height: 0;
	border-top: 14px solid #fff;
	border-bottom: 14px solid #fff;
	border-left: 14px solid #7dba00;
	position:absolute;
	right:-4px;
	top:1px;
}
.steps p {
	background: #fff;
margin: 0;
float: left;
height: 30px;
line-height: 14px;
font-size: 10px;
width: 10em;
padding: 0 10px 0 0px;
text-align: center;
}
/* closed */
.closed .num:after {border-left-color:#000}
.closed .num {color:#fff;background:#000}
.closed .num.last:after {display:none}
/* open */
.open .num:after {
	border-left-color:#ccc;
	border-top-color:transparent;
	border-bottom-color:transparent;
	z-index:1;
}
.open .num:before {
	width: 0;
	height: 0;
	content:" ";
	position:absolute;
	border-top: 15px solid #fff;
	border-bottom: 15px solid #fff;
	border-left: 15px solid #7dba00;
	position:absolute;
	right:-5px;
	top:0;
	z-index:0;
}
.open .num {background:#ccc;}
.open .wrap {border-radius:15px 0 0 15px;border:1px solid #7dba00}
li.open:after {
	content:" ";
	width: 0;
	height: 0;
	border-top: 16px solid #fff;
	border-bottom: 16px solid #fff;
	border-left: 15px solid #7dba00;
	position:absolute;
	right:0;
	top:0;
	z-index:0;
}
li.open:before {
	width: 0;
	height: 0;
	content:" ";
	border-top: 15px solid transparent;
	border-bottom: 15px solid transparent;
	border-left: 14px solid #fff;
	position:absolute;
	right:1px;
	top:1px;
	z-index:1;
}
/*CSS for steps ends*/


.expanded {display:none;}
 jQuery(document).ready(function() {
   jQuery('.closedArrow').click(function() {
    $('.expanded').toggle();
	$('.collapsed').toggle();
	$( "span.closedArrow" ).toggleClass( "openArrow" );
	
});
  });
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js