Как вывести контент с помощью show()?

Question

[nextnull]

Привет, подскажите как можно реализовать.
Есть страница вордпресс, для нее есть свой шаблон.
В этой странице нужно вывести 4 поста определеной категории.
С этим понятно. Сделал

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

Answer 1

[Владимир Проскурин]

Ну вообще, по хорошему, нужно сделать API, и за каждым постом обращаться по ajax, и выводить его.
А так, каждый пост пусть имеет блок

<div data-post-id="его post_id" class="post_block">Сам пост</div>

в css делаете
.post_block { display: none; }
и ссылки должны быть вида

<a href="что-то там" data-to-post="нужный post_id">текст</a>

и если мы юзаем jQuery, то пишем

$(function() {
   $('[data-to-post]').click(function(e) {
      e.preventDefault();
      var postId = $(this).data('to-post');
      $('.post_block').not('[data-post-id="' + postId + '"]').fadeOut(); // прячем все блоки, кроме текущего, чтобы не было бага анимации
      $('.post_block[data-post-id="' + postId + '"]').fadeIn(); // показываем нужный
   });
});

Как-то так. Писал с телефона, поэтому не поленитесь проверить.

Comments

[nextnull]

Помогло, спасибо большое.
Подскажи, если обратно кликнуть что скрылось как дописать?

[Владимир Проскурин]

nextnull, всмысле, чтобы при повторном клике на ссылку, пост скрывался? Думаю так

$(function() {
   $('[data-to-post]').click(function(e) {
      e.preventDefault();
      var postId = $(this).data('to-post');
      $('.post_block').not('[data-post-id="' + postId + '"]').fadeOut(); // прячем все блоки, кроме текущего, чтобы не было бага анимации
      $('.post_block[data-post-id="' + postId + '"]').fadeToggle(); // показываем нужный
   });
});

[nextnull]

Владимир Проскурин, Спасибо большое, друг!

Answer 2

[Stalker_RED]

Вешаешь обработчик на клик по заголовку.
Обработчик делает ajax-запрос.
Получает данные.
Выводит что-то там внизу.

С каким из пунктов сложности?

Comments

[nextnull]

ну как это сделать, не могу понять(

[Максим Тимофеев]

nextnull, Почитать про jquery и про ajax, иначе никак