Доброго времени суток.
Имеется страница на которой расположены новости, каждая новость идет друг за другом в блоках div, подскажите как можно реализовать так, что бы по нажатии на новость или кнопку рядом с ней, эта новость открывалась на этой же странице и скрывала другие новости, а потом по кнопке назад все возвращалось.
Может добавить каждому блоку ID и при нажатии "читать далее" можно скрыть все новости на странице, а потом наоборот открыть их? Или все новости в один блок с ID и как-то оттуда вытаскивать уже..
Или как можно еще сделать?
Модальное - самое то. Заливай background модального окна сплошным, например белым цветом, что скроет все остальное на странице. Будет чем-то похоже, как в Контакте "Статьи" отображаются. Кнопку закрытия окна, можно в правый верхний угол перенести.
Согласен с ораторами, что можно повесить модальное и заранее подгружать скрытые данные через prefetch, а по клику на новость раскрывать ее полностью (префетч делает такой способ реактивным).
Руководитель frontend направления, предприниматель
Дешево и сердито, использовать JS-фреймворк с роутами (Vue\React...). Можно и без роутов, на компоненте, тут не столь важно.
Долго и скорее всего не будет смысла — на JS без фреймворка: получать event.target и все несовпадающее элементы убирать. А этому давать класс, который раскрое скрытую информацию, или на JS добавит откуда-то (объекта в памяти или по get-запросу в API)