JSFiddle - React, Tailwind, and code Playground

by Rozina Szogyenyi

HTML

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<h2>
  North America
</h2>
<table>
<thead>
  <td></td>
  <td>Country</td>
</thead>
<tbody>
<tr class="odd">
   <td class="td-flag"><img src="http://bstatic.com/static/img/flags/16/ca.png"></td>
   <td class="td-country">Canada</td>
   <td class="td-legalname">Canada Booking.com Online Reservations Inc</td>
    <td class="td-actionbuttons">
     <a data-country-id="1" href="#" class="button js-show-offices-trigger">Offices</a>
     <a data-country-id="1" href="#" class="button js-show-contact-trigger">Contact</a>
    </td>
</tr>

<tr data-country-id="1" class="js-show-contact g-hidden odd office-container">
    <td colspan="2" class="td-empty">
       &nbsp;
   </td>
   <td colspan="2" class="td-contact">

      <p>
      <strong>Customer Service</strong><br />
      Support in English: 1 (866) 492 3245<br />
      Support in French: 1 (866) 493 3497</p>
      <p><strong>Hotel support:</strong> <br />
      Support in English 1 (866) 492 3246<br />
      Support in French 1 (866) 497 4619</p>
   </td>
</tr>
<tr data-country-id="1" class="js-show-offices g-hidden odd office-container">
   <td colspan="2" class="td-officename">
       Toronto
   </td>
   <td colspan="2" class="td-officecontact">
       <table>
         <tr>
            <td class="td-address">
              Bay Adelaide Centre<br />
              333 Bay Street, Suite 620<br />
              Toronto, M5H 2R2<br />
              Canada
            </td>
            <td>
              Office phone: +1 (470) 363 2501 (office hours)
            </td>
         </tr>
       </table>
   </td>
</tr>   
<tr data-country-id="1" class="js-show-offices g-hidden odd office-container">
   <td colspan="2" class="td-officename">
       Montreal
   </td>
   <td colspan="2" class="td-officecontact">
       <table>
         <tr>
            <td class="td-address">
              116 Huntington Ave<br />
              7th Floor<br />
             ...

CSS

* {padding: 0; margin: 0; box-sizing: border-box;}
body {font-family: 'Helvetica Neue', sans-serif; color: #555; font-size: 13px; padding: 20px;}

h2 {
  margin: 0 0 20px 0;
  padding: 0 0 5px 0;
  border-bottom: 1px solid #A3B1BF;
}

table {
   width: 100%;
   border-spacing: 0;
   border-collapse: separate;
}
.g-hidden {
  display: none;
}

table td {
  padding:  5px 10px;
  line-height: 140%;
}

.td-officename {
  font-weight: bold;
  vertical-align: top;
}

.td-officecontact {
  padding: 0;
  
}

.td-officecontact td {
  vertical-align: top;
}

.td-actionbuttons {
  text-align: right;
}

.td-flag {
  width: 16px;
  vertical-align: middle;
  padding-right: 0;
}

.td-legalname,
.td-address{
  color: #A3B1BF;
}

.odd {
  background-color: #EEE;
}
.even {
   background-color: #FFF;
}

.odd .td-empty,
.odd .td-contact,
.odd .td-officename,
.odd .td-officecontact {
  border-top: 1px solid #DDD;
}

.even .td-empty,
.even .td-contact,
.even .td-officename,
.even .td-officecontact {
  border-top: 1px solid #EEE;
}

.office-list td {
  vertical-align: top;
  width: 33%;
}


.button {
  border: 1px solid #0896ff;
  border-radius: 3px;
  text-decoration: none;
  color: #0896ff;
  display: inline-block;
  padding: 4px 6px;
}
.button:hover {
  background: #0896ff;
  color: #FFF;
}
.button.active {
  background-color: #0896ff;
  color: #fff;
}

JavaScript

var $showOfficeTrigger = $('.js-show-offices-trigger'),
		$showContactTrigger = $('.js-show-contact-trigger');

function hideContact(countryId) {

  $('.js-show-contact-trigger[data-country-id=' + countryId + ']').removeClass('active');
  
	$('.js-show-contact[data-country-id=' + countryId + ']').addClass('g-hidden');
}
function showContact(countryId) {

  $('.js-show-contact-trigger[data-country-id=' + countryId + ']').addClass('active');
  
	$('.js-show-contact[data-country-id=' + countryId + ']').removeClass('g-hidden');
}

function showOffices(countryId) {
  $('.js-show-offices-trigger[data-country-id=' + countryId + ']').addClass('active');
  
	$('.js-show-offices[data-country-id=' + countryId + ']').removeClass('g-hidden');
}

function hideOffices(countryId) {
  $('.js-show-offices-trigger[data-country-id=' + countryId + ']').removeClass('active');
  
	$('.js-show-offices[data-country-id=' + countryId + ']').addClass('g-hidden');
}

$showOfficeTrigger.click(function(e) {
	e.preventDefault();
	var countryId = $(this).attr('data-country-id');
  
  if ($(this).hasClass('active')) {
  	hideOffices(countryId);
  } else {
  	showOffices(countryId);
    hideContact(countryId);
  }
});

$showContactTrigger.click(function(e) {
	e.preventDefault();
	var countryId = $(this).attr('data-country-id');
  
  if ($(this).hasClass('active')) {
  	hideContact(countryId);
  } else {
  	showContact(countryId);
    hideOffices(countryId);
  }
});