Текст разбивается тегами p.
У некоторых тегов p есть data-аттрибут "data-opens", в котором вписан некоторый id.
Соответственно у некоторых тегов есть data-аттрибут "data-opened-by" c id.
У некоторых тегов есть data-closed-by с id.
Т.е. когда нажимаем на тег, у которого есть data-opens={id} у нас открывются элементы, у которых есть аттрибут data-opened-by={id} и скрываются элементы с аттрибутом data-closed-by={id}
js код довольно просто выглядит, как мне кажется:
document.addEventListener('click', function(event) {
// получаем элемент
var target = event.target;
// отсекаем лишние события
if ((target.tagname !== 'A') || (target.classList.contains('clicked')) {
return;
}
// получаем id
var id = target.dataset.opens;
// находим элементы с data-аттрибутами с нужным id
// Велосипед со slice нужен потому что querySelectorAll не массив возвращает)
// Я там шаблонные строки использовал ещё, потому что лень было писать
var elementsToShow = Array.prototype.slice.call(document.querySelectorAll(`[data-openedby="${id}"]`));
var elementsToHide = Array.prototype.slice.call(document.querySelectorAll(`[data-closedby="${id}"]`));
// показываем те элементы которые надо показать
elementsToShow.forEach(function(element) {
element.style.display = 'block';
});
// прячем те, которые надо прятать
elementsToHide.forEach(function(element) {
element.style.display = 'none';
});
// помечаем, что элемент кликнутый
target.classList.add('clicked');
});
P.S. конечно код нужно повесить на какой-то контейнер, проверять есть ли вообще id и т.д. Это минимальный вариант.
