Как сократить скрипт?

Question

[Анастасия]

Всем привет, у меня такой скрипт. Скажите, пожалуйста, как его можно сократить?

$(document).ready(function () {
  $("#first-title").click(function () {
    $(".categories-list-first").slideToggle("fast");
  });
  $("#second-title").click(function () {
    $(".categories-list-second").slideToggle("fast");
  });
  $("#third-title").click(function () {
    $(".categories-list-third").slideToggle("fast");
  });
  $("#fourth-title").click(function () {
    $(".categories-list-fourth").slideToggle("fast");
  });
  $("#fifth-title").click(function () {
    $(".categories-list-fifth").slideToggle("fast");
  });
  $("#sixth-title").click(function () {
    $(".categories-list-sixth").slideToggle("fast");
  });
});

Answer 1

[Stalker_RED]

Answer 2

[0xD34F]

Вместо id назначаете элементам классы, которые будут указывать, чем является элемент (его надо кликать пользователю, или при клике переключать видимость) и атрибут, совпадающие значения которого будут указывать, кто с кем в паре:

<div class="title" data-name="first">
<div class="title" data-name="second">
...


<div class="list" data-name="first">
<div class="list" data-name="second">
...

$('.title').click(function() {
  $(`.list[data-name="${this.dataset.name}"]`).slideToggle('fast');
});

Если у обоих групп элементов есть общий родитель, и порядок элементов внутри родителей совпадает, тогда можно обойтись без дополнительного атрибута:

$('.title').click(function() {
  $('.list').eq($(this).index()).slideToggle('fast');
});

Если же общие предки есть у пар .title /.list, тогда можно так:

$('.title').click(function() {
  $(this).closest('здесь селектор общего предка').find('.list').slideToggle('fast');
});