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