Спрятанный текст открывается по клику: какими инструментами этого добиться?

Question

[gaito-gazdanov]

Есть сайт писателя Алана Троттера, и там, прямо на главной странице, содержится без малого целый рассказ.
Однако пользователя сайт встречает всего тремя предложениями. Для того, чтобы увидеть остальное содержимое, нужно обратиться к нескольким словам-ссылкам, клик по которым открывает новые фрагменты текста.
Разумеется, эти фрагменты содержат другие слова-ссылки, вызывающие на экран уже другой контент. И так далее.

Вопрос: какими средствами вы бы воспользовались, чтобы добиться такого эффекта?
(При том, что нам мало показать спрятанный текст, — нам еще нужно убрать ссылки у слов при первом показе спрятанного в них контента. И иметь возможность размещать этот контент где угодно — хоть в начале, хоть в самом конце текста — вне зависимости от положения слова-ссылки.)

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

N.B. Сам Троттер утверждает, что использовал для этого JS и писал код сам. Автор вопроса пытался вникнуть в принцип функционирования сайта, изучая его код в хроме. Но все нити, кажется, обрываются на файле extrascript.js, который, по всей видимости, управляет поведением всего контента на сайте. И, конечно, на нем не доступен.

Хелп

Answer 1

[Николай]

Текст разбивается тегами 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 и т.д. Это минимальный вариант.

Comments

[Егор Живагин]

Повесить и проверять нужно, конечно, но автор того сайта не стал об этом думать))

Answer 2

[Егор Живагин]

Да кто ж вам сказал, что этот скрипт недоступен?)) Идите сюда смотреть
Там всё очень просто. По клику на слово считывается data-атрибут с блока. Через него находится текст, который нужно открыть. Также по клику на ссылку вешается класс "checked", который убирает подчёркивание.
В JS я не заходил, это всё видно из инспектора)