Принцип работы фильтра:
Показывает либо скрывает события сюжета по различным признакам; нажимая на кнопочки с названиями планет или с параметрами события, вы можете добавить эти признаки в искомые либо отсеять. Первое нажатие покажет вам все события, которые относятся к данной категории, второе нажатие скроет их из списка, третье нажатие вернёт кнопочку в нейтральное положение.

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

Общая пояснительная инструкция от большего к меньшему; шаблоны будут ниже:
1. Составление хронологии начинается с создания заголовка и временного отрезка (эпизода хронологии).

2. В эпизод хронологии помещаются сами события, которые отмечены тегами:

3. Можно создавать бесконечно много заголовков с эпизодами и событий в них. Для создания пользуйтесь шаблоном, просто заменяя необходимые участки.

4. Теги - это то, что распознаёт фильтр. Они перечисляются подряд без запятых и разделительных знаков, только через пробел. Весь список тегов находится в самом коде в начале хронологии: изучите участок <div class='filgroup'>. Например, рассмотрим самые первые строки:

value - это нужные вам теги, далее в конце строки имеется пояснение, к чему он относится. Таким образом, если вы желаете отнести событие к вышеуказанным планетам, вы должны заполнить первую строку события следующим образом:

Вы можете комбинировать теги в любом количестве и в любом порядке, но советую следовать по списку в коде хронологии, чтобы не упустить и не запутаться.

Вы можете создавать дополнительные теги, просто копируя имеющиеся строки и назначая новый тег и новое название тега.

Шаблоны:

[html]
<!--  @hagalnaud 2024 chronology -->

<details>
    <summary>открыть поиск</summary>

<div class='filter'>

<div class='filtersearch'>
<span>найти по слову:</span>
<input type="text" id="searchInput">
</div>

<div class='filterlist'>
<h2>Локации</h2>
<div class='filgroup'>
  <label><input type="checkbox" value="al" class="neutral">Алькор</label>
  <label><input type="checkbox" value="pr" class="neutral">Процион</label>
  <label><input type="checkbox" value="zi" class="neutral">Циркон</label>
  <label><input type="checkbox" value="li" class="neutral">Лирея</label>
  <label><input type="checkbox" value="ab" class="neutral">Абберат</label>
  <label><input type="checkbox" value="el" class="neutral">Элерим</label>
  <label><input type="checkbox" value="sa" class="neutral">Сабаот</label>
  <label><input type="checkbox" value="ha" class="neutral">Харот</label>
  <label><input type="checkbox" value="cl" class="neutral">Климбах</label>
  <label><input type="checkbox" value="pl" class="neutral">Планетоиды</label>
  <label><input type="checkbox" value="co" class="neutral">Космос</label>
</div>
<h2>Параметры событий</h2>
<div class='filgroup'>
  <label><input type="checkbox" value="part" class="neutral">Могли быть участником</label>
  <label><input type="checkbox" value="news" class="neutral">Могли узнать в новостях</label>
  <label><input type="checkbox" value="vict" class="neutral">Было много жертв</label>
  <label><input type="checkbox" value="no" class="neutral">Без широкой огласки</label>
  <label><input type="checkbox" value="chthonic" class="neutral">Хтонические прорывы</label>
  <label><input type="checkbox" value="anomaly" class="neutral">Аномалии и червоточины</label>
  <label><input type="checkbox" value="operation" class="neutral">Боевые действия в городах</label>
</div></div>

</div>
</details>

<br><br>

<div class='chrono'>

<span>разделитель-закладка любой длины</span>

<div class='episode'>

<li class='al chthonic'>
<div id='epz'><div class='first'><a href="https://arhi.rusff.me/" class='date'>2/03/2023</a><br> город, имя участника, другие краткие уточнения</div>
<div class='second'>Протестируйте фильтр: это событие назначено к планете Алькор. При первом нажатии на название планеты в фильтрах будет видно только это событие, при втором нажатии - все события, кроме этого, при третьем всё вернётся как было.
</div></div>
</li>

</div>

<span>заголовок месяца или года 9999</span>

<div class='episode'>

<li class='part chthonic'>
<div id='epz'><div class='first'><a href="https://arhi.rusff.me/" class='date'>2/03/2023</a><br> город, имя участника, другие краткие уточнения</div>
<div class='second'>Описание события <a href="https://arhi.rusff.me/">с ссылками на источники</a>. Длинное или не очень.
</div></div>
</li>

<li class='pr no'>
<div id='epz'><div class='first'><a href="https://arhi.rusff.me/" class='date'>2/03/2023</a><br> город, имя участника, другие краткие уточнения</div>
<div class='second'>Описание события <a href="https://arhi.rusff.me/">с ссылками на источники</a>. Длинное или не очень.
</div></div>
</li>

<li class='operation chthonic'>
<div id='epz'><div class='first'><a href="https://arhi.rusff.me/" class='date'>Название эры</a><br> город, имя участника, другие краткие уточнения</div>
<div class='second'>Описание события <a href="https://arhi.rusff.me/">с ссылками на источники</a>. Длинное или не очень. Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum. Длинное или не очень. Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.
</div></div>
</li>

</div>

<span>заголовки видны всегда - они обозначают основные этапы</span>

</div>

<!--  конец хроно -->
</div>

<!--  скрипт хронологии, файл находится в разделе Администрирование - Файлы -->
<script type="text/javascript" src="https://forumstatic.ru/files/001b/8c/87/36366.js"></script>
<!--  стиль хронологии, файл находится в разделе Администрирование - Файлы -->
<link rel="stylesheet" href="https://forumstatic.ru/files/001b/8c/87/71358.css?v=27" type="text/css"/>

[/html]

Подпись автора