Argeares,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.hides span {
display: none;
}
</style>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
(function($, window, document) {
$(function() {
$(".more-inf").click(function() {
$(this).toggleClass("active");
$(this).children('p').text($(".hides").find('span').is(':visible') ? 'Подробности' : 'Скрыть подробности');
$(".hides").find('span').slideToggle(400);
});
});
})(jQuery, window, document);
</script>
</head>
<body>
<div class="table-wrap">
<table>
<tr>
<td>Легитимная пропускная способность*</td>
<td>50 Mbps</td>
</tr>
<tr class="hides">
<td><span>Географическое расположение</span></td>
<td><span>Россия, г.Москва</span></td>
</tr>
<tr class="hides">
<td><span>Объем передаваемого трафика</span></td>
<td><span>не лимитируется</span></td>
</tr>
<tr class="hides">
<td><span>Порт подключения</span></td>
<td><span>1 Гбит/с</span></td>
</tr>
<tr class="hides">
<td><span>Частота резервного копирования</span></td>
<td><span>1 раз в сутки</span></td>
</tr>
<tr class="hides">
<td><span>Время установки</span></td>
<td><span>15 минут</span></td>
</tr>
<tr>
<td>Полное описание услуги</td>
<td class="more-inf">
<p>Подробности</p>
</td>
</tr>
</table>
</div>
</body>
</html>