JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.14/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.14/themes/black-tie/jquery-ui.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css">
<td id="offices">
<div id="show-all" style="display:none;">Show Countries <i class="icon-expand-alt"></i></div>
<div id="hide-all" style="display:none">Hide Countries <i class="icon-collapse-alt"></i></div>
<ul>
<li><a href="#" rel="tag">Egypt</a></li>
<li><a href="#" rel="tag">France</a></li>
<li><a href="#" rel="tag">Indonesia</a></li>
<li><a href="#" rel="tag">Malaysia</a></li>
<li><a href="#" rel="tag">Mauritius</a></li>
<li><a href="#" rel="tag">Russian Federation</a></li>
</ul>
</td>

CSS

#show-all,
#hide-all {
	cursor: pointer;
	color: #87B8E2;
    margin-bottom:10px;
}
a {
color: #4280B4;
text-decoration: none;
}
ul {
    margin: 0;
    padding: 0;
}
li {
    list-style: none;
}

JavaScript

jQuery('#show-all').show();
        jQuery('#offices ul').hide();

    jQuery('#show-all').click(function () {
            jQuery('#show-all').hide();
            jQuery('#hide-all').show();
            jQuery('ul').slideToggle();
    });

    jQuery('#hide-all').click(function () {
            jQuery('#show-all').show();
            jQuery('#hide-all').hide();
            jQuery('ul').slideToggle();
    });