Форум

Argeares · #1 (**permalink**) 03.11.2017, 11:07

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

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

<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);
	});

Rasy · #2 (**permalink**) 03.11.2017, 11:17

Argeares,
на 8 строке ошибка

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

Rasy · #3 (**permalink**) 03.11.2017, 11:25

И сам эффект не сработает для строки <tr>

Argeares · #4 (**permalink**) 03.11.2017, 11:26

исправил, но анимация так и не появилась(

Argeares · #5 (**permalink**) 03.11.2017, 11:28

понял

Argeares · #6 (**permalink**) 03.11.2017, 11:34

а не посоветуете как стоить сделать что бы заработало?)

Rasy · #7 (**permalink**) 03.11.2017, 11:42

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>

Argeares · #8 (**permalink**) 03.11.2017, 11:45

сделал, спасибо вам

рони · #9 (**permalink**) 03.11.2017, 12:14

танец с бубнами

<!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>

Rasy · #10 (**permalink**) 03.11.2017, 13:10

Сообщение от рони

танец с бубнами

Хех. Покрасивше эффект получился, как с дивом.

Форум

Справочник

Discord чат

Курсы javascript