Javascript-форум - Как грамотно прописать существующий скрипт в тройном использовании?

Javascript-форум (https://javascript.ru/forum/)

- (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)

- - Как грамотно прописать существующий скрипт в тройном использовании? (https://javascript.ru/forum/xhtml-html-css/67016-kak-gramotno-propisat-sushhestvuyushhijj-skript-v-trojjnom-ispolzovanii.html)

закономерность в порядковом номере для общей переменной

<table border="1">
  <tr class="spoil1">
    <td>можно</td>
    <td>развернуть</td>
  </tr>
  <tr class="hide1">
    <td>скрытые</td>
    <td>строки</td>
  </tr>1
  <tr class="hide1">
    <td>скрытые</td>
    <td>строки</td>
  </tr>
  <tr class="spoil2">
    <td>можно</td>
    <td>развернуть</td>
  </tr>
  <tr class="hide2">
    <td>скрытые</td>
    <td>строки</td>
  </tr>
  <tr class="hide2">
    <td>скрытые</td>
    <td>строки</td>
  </tr>
  <tr class="spoil3">
    <td>можно</td>
    <td>развернуть</td>
  </tr>
  <tr class="hide3">
    <td>скрытые</td>
    <td>строки</td>
  </tr>
  <tr class="hide3">
    <td>скрытые</td>
    <td>строки</td>
  </tr>
</table>

Пропиши скрипт

JAMLIGHT,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  table {
 width:600px;
 border:1px;
 }
 .hide {
 display:none;
 }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function(){
$('.spoil').click(function(){
$(this).nextUntil('.spoil').toggle();
})
})

  </script>
</head>

<body>
<table border="1">
  <tr class="spoil">
    <td>можно</td>
    <td>развернуть</td>
  </tr>
  <tr class="hide">
    <td>скрытые</td>
    <td>строки</td>
  </tr>
  <tr class="hide">
    <td>скрытые</td>
    <td>строки</td>
  </tr>
  <tr class="spoil">
    <td>можно</td>
    <td>развернуть</td>
  </tr>
  <tr class="hide">
    <td>скрытые</td>
    <td>строки</td>
  </tr>
  <tr class="hide">
    <td>скрытые</td>
    <td>строки</td>
  </tr>
  <tr class="spoil">
    <td>можно</td>
    <td>развернуть</td>
  </tr>
  <tr class="hide">
    <td>скрытые</td>
    <td>строки</td>
  </tr>
  <tr class="hide">
    <td>скрытые</td>
    <td>строки</td>
  </tr>
</table>


</body>
</html>

тем что он скрывает ВСЕ строки с классом hide прописанные после кликнутой строки с классом spoil. А надо не все, а определённые. Тобишь надо чтобы spoil1 скрывал Hide1, spoil 2-Hide2 и тд Для этой цели я прописал 5 скриптов,но это не дело сами понимаете

JAMLIGHT,
смотрите макет выше.

К примеру мне надо разворачивающиеся строки в таблице с городами со средним заработком. Например Средний заработок 10 000 рублей-Разворачивается(скрываетс� �) 5 городов. Средний заработок 15 000 Руб-7 городов. А если у меня этих средних заработков в таблице 50 штук я что 50 аналогичных скриптов буду в код писать? . Если так копипастить скрипт то он займёт больше разметки
\Спасибо щас потестю

JAMLIGHT,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  table {
 width:600px;
 border:1px;
 }
 [class*="hide"] {
 display:none;
 }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function(){
$('.spoil').click(function(){
var cls = $(this).data("cls")
$(cls).toggle();
})
})

  </script>
</head>

<body>
<table border="1">
  <tr class="spoil"  data-cls=".hide1">
    <td>можно</td>
    <td>развернуть</td>
  </tr>
  <tr class="hide1">
    <td>скрытые</td>
    <td>строки</td>
  </tr>
  <tr class="hide1">
    <td>скрытые</td>
    <td>строки</td>
  </tr>
  <tr class="spoil" data-cls=".hide2">
    <td>можно</td>
    <td>развернуть</td>
  </tr>
  <tr class="hide2">
    <td>скрытые</td>
    <td>строки</td>
  </tr>
  <tr class="hide2">
    <td>скрытые</td>
    <td>строки</td>
  </tr>
  <tr class="spoil" data-cls=".hide3">
    <td>можно</td>
    <td>развернуть</td>
  </tr>
  <tr class="hide3">
    <td>скрытые</td>
    <td>строки</td>
  </tr>
  <tr class="hide3">
    <td>скрытые</td>
    <td>строки</td>
  </tr>
</table>



</body>
</html>

То что надо. Ценю

а чем эти 2 варианта отличаются?

JAMLIGHT,
:blink: тем что для второго варианта пост№17 неважно где будут находится открываемые строки