[Argeares]

Здравствуйте, нужна помощь, уже день вожусь, и так и не пойму в чем проблема, побывал поразомну делать но остановился на этом варианте, но почему то не срабатывает анимация, хотя по идеи должна работать.
Перерыл много форумов, но нечего так и не нашел( подскажите пожалуйста.

в чём может быть проблема?

<style>
   .hides {
     display: none;
  }
</style>
<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>

$(".more-inf").click(function() {
		$(".more-inf").toggleClass("active");
		$(".more-inf p").text($(".hides").is(':visible') ? 'Подробности' : 'Скрыть подробности');
		$(".hides").slideToggle(400);
	});