Как поэтапно раскрыть/скрыть пост?

Ссылка скопирована
HTML Viewport
1 ответ

Как скрыть/раскрыть ту или иную часть поста в ленте? Такое, чаще всего можно встретить в новостниках.

Посты изначально отображаются в виде заголовков. Мне нужна некая кнопка раскрывашка-скрывашка , кликами по которой поэтапно отображались бы части постов по признакам. Например по: header → excerpt → article → пост целиком. По той же кнопке, посты схлопываются в изначальный вид.

Спасибо!

Дополнительно

Ты пытался что-то сделать сам?

Руслан Кириченко @timka92 Новичок

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .accordion {     background-color: #eee;     color: #444;     cursor: pointer;     padding: 18px;     width: 100%;     border: none;     text-align: left;     outline: none;     font-size: 15px;     transition: 0.4s; }  .active, .accordion:hover {     background-color: #ccc; }  .panel {     padding: 0 18px;     background-color: white;     max-height: 0;     overflow: hidden;     transition: max-height 0.2s ease-out; } </style> </head> <body>  <h2>Animated Accordion</h2> <p>Click on the buttons to open the collapsible content.</p>  <button class="accordion">Section 1</button> <div class="panel">   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div>  <button class="accordion">Section 2</button> <div class="panel">   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div>  <button class="accordion">Section 3</button> <div class="panel">   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div>  <script> var acc = document.getElementsByClassName("accordion"); var i;  for (i = 0; i < acc.length; i++) {   acc[i].addEventListener("click", function() {     this.classList.toggle("active");     var panel = this.nextElementSibling;     if (panel.style.maxHeight){       panel.style.maxHeight = null;     } else {       panel.style.maxHeight = panel.scrollHeight + "px";     }    }); } </script>  </body> </html>

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .accordion { background-color: #eee; color: #444; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; transition: 0.4s; } .active, .accordion:hover { background-color: #ccc; } .panel { padding: 0 18px; background-color: white; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; } </style> </head> <body> <h2>Animated Accordion</h2> <p>Click on the buttons to open the collapsible content.</p> <button class="accordion">Section 1</button> <div class="panel"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <button class="accordion">Section 2</button> <div class="panel"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <button class="accordion">Section 3</button> <div class="panel"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <script> var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function() { this.classList.toggle("active"); var panel = this.nextElementSibling; if (panel.style.maxHeight){ panel.style.maxHeight = null; } else { panel.style.maxHeight = panel.scrollHeight + "px"; } }); } </script> </body> </html>

  • Спасибо за подробный ответ. Воспользовался Houdini, но ваш натолкнул.

Ответы:

Можно использовать jQuery, по клику на кнопке вызывать:
fadeIn()
fadeOut()
на требуемых блоках.

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь
Лучший ответ
1
Мария Код Ответ

Такую «раскрывашку» лучше делать не через перезагрузку страницы, а через состояние карточки поста на фронте. В шаблоне ленты выводите несколько частей: заголовок, excerpt, дополнительный фрагмент и полный текст или ссылку. JavaScript по клику меняет шаг, а CSS показывает нужные блоки. Это проще и надёжнее, чем пытаться менять сам запрос WordPress после каждого клика.

Пример разметки одной карточки:

<article class="feed-card" data-step="1">
  <h2>Заголовок поста</h2>
  <div class="feed-step feed-excerpt">Краткое описание</div>
  <div class="feed-step feed-fragment">Часть статьи</div>
  <div class="feed-step feed-full">Полный текст</div>
  <button class="feed-toggle" type="button">Раскрыть</button>
</article>

<article class="feed-card" data-step="1"> <h2>Заголовок поста</h2> <div class="feed-step feed-excerpt">Краткое описание</div> <div class="feed-step feed-fragment">Часть статьи</div> <div class="feed-step feed-full">Полный текст</div> <button class="feed-toggle" type="button">Раскрыть</button> </article>

Логика переключения:

document.addEventListener('click', function (event) {
  const button = event.target.closest('.feed-toggle');
  if (!button) return;
 
  const card = button.closest('.feed-card');
  let step = Number(card.dataset.step || 1);
  step = step >= 4 ? 1 : step + 1;
  card.dataset.step = String(step);
  button.textContent = step === 1 ? 'Раскрыть' : step === 4 ? 'Скрыть' : 'Показать ещё';
});

document.addEventListener('click', function (event) { const button = event.target.closest('.feed-toggle'); if (!button) return; const card = button.closest('.feed-card'); let step = Number(card.dataset.step || 1); step = step >= 4 ? 1 : step + 1; card.dataset.step = String(step); button.textContent = step === 1 ? 'Раскрыть' : step === 4 ? 'Скрыть' : 'Показать ещё'; });

CSS должен показывать блоки по шагам: на первом шаге только заголовок, на втором excerpt, на третьем excerpt плюс фрагмент, на четвёртом весь текст. Для новостной ленты не стоит выводить полный контент десятков постов сразу: это утяжелит HTML, ухудшит скорость и может создать SEO-дубли. Практичнее выводить полный текст только для небольшого списка или подгружать его AJAX-запросом по клику.

Если проект на WordPress, такую логику размещайте в шаблоне карточки и отдельном JS-файле темы, подключённом через wp_enqueue_script.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Вам также может быть интересно

VPN Как правильно настроить vless для Android TV? 0 ответов Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 0 ответов печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 0 ответов Аккумуляторные батареи Почему при зарядке автостарта слышен писк, где искать причину? 0 ответов