Order status table html/css help

HTML & CSS
3

Hi,

Sorry my post wasn’t very clear.

  1. Clicking the a/c number or the green arrow reveals the hidden info.
  2. in the collapsed view the extra info gets hidden.
  3. There are more rows. In the expanded state, the other rows shift below.

This is what I’ve got till now based on the succinct HTML from this thread:

 <table class="multiAccount">
  <tr>
    <th>Account #</th>
    <th>Order #</th>
    <th>Current Status (Ongoing)</th>
   
  </tr>
  <tr>
    <td>4579637</td>
    <td>5822412</td>
    <td><ol class="steps">
		<li>
				<div class="num"><b>1</b></div>
		</li>
		<li>
				<div class="num"><b>2</b></div>
		</li>
		<li class="open">
				<div class="wrap">
						<div class="num"><b>3</b></div>
						<p><span>Order Provisioning In Progress</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>
   
  </tr>
  <tr>
  <td>4579637</td>
    <td>5822412</td>
	<td>
	<ol class="steps">
		<li class="open">
				<div class="wrap">
						<div class="num"><b>1</b></div>
						<p><span>Order Provisioning In Progress</span></p>
				</div>
		</li>
		<li class="open">
				<div class="wrap">
						<div class="num"><b>2</b></div>
						<p><span>Order Provisioning In Progress</span></p>
				</div>
		</li>
		<li class="open">
				<div class="wrap">
						<div class="num"><b>3</b></div>
						<p><span>Order Provisioning In Progress</span></p>
				</div>
		</li>
		<li class="open">
				<div class="wrap">
						<div class="num"><b>4</b></div>
						<p><span>Order Provisioning In Progress</span></p>
				</div>
		</li>
		<li class="open">
				<div class="wrap">
						<div class="num"><b>5</b></div>
						<p><span>Order Provisioning In Progress</span></p>
				</div>
		</li>
</ol>
	</td>
  </tr>
  
  <tr>
  <td>4579637</td>
    <td>5822412</td>
	<td>
	
	<ol class="steps">
		<li>
				<div class="num"><b>1</b></div>
		</li>
		<li>
				<div class="num"><b>2</b></div>
		</li>
		<li class="open">
				<div class="wrap">
						<div class="num"><b>3</b></div>
						<p><span>Order Provisioning In Progress</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>
  </tr>
  
  
</table>

This is the full table I’m trying to recreate:

844×614 79.2 KB