Проблемы с реализацией кнопок «Показать/Скрыть» для функции панели в jQuery? ⇐ Jquery

[Anonymous]

Я создаю сайт для ведения блога. Я хочу, чтобы на этой странице было несколько записей в блоге, и я хочу, чтобы пользователь мог нажать кнопку «Показать», чтобы сдвинуть панель вниз и показать конкретную запись в блоге. После этого кнопка будет изменена с помощью jQuery на «Скрыть». Затем, если пользователь нажмет кнопку «Скрыть», запись в блоге переместится вверх и снова скроется. Несколько записей блога должны иметь возможность отображаться (или скрываться) одновременно.
Это фрагмент моего кода:
stories.html


Blog Title #1
Show

Date #1

Some Paragraph #1

Blog Title #2
Show

Date #2

Some Paragraph #2



main.js
$(function () {
$(".panel-header button:contains('Show')").on("click", function() {
//show
$(this).text("Hide");

var panelToShow = $(this).parent().attr('rel');

$('#'+panelToShow).slideDown(300, function() {
$(this).addClass('active');
});
//hide
$(".panel-header button:contains('Hide')").on("click", function() {
$(this).text("Show");

var panelToHide = $(this).parent().attr('rel');

$('#'+panelToHide).slideUp(300, function() {
$(this).removeClass('active');
});
});
});

В моем файле main.css для .panel установлено значение display: none, а для .panel.active установлено значение display: block.
Я уже пробовал поместить скрывающую часть JavaScript вне обратного вызова. Но это не сработало (т. е. он смог только показать запись в блоге, но не смог скрыть ее обратно).
В этом случае он смог показать и скрыть запись в блоге, но только один раз. После этого он начинает делать какие-то странные вещи. Он опускается вниз, а затем сразу же поднимается обратно после того, как я нажимаю кнопку «Показать».
Любая помощь приветствуется!
РЕДАКТИРОВАТЬ Я нашел решение. Я до сих пор не уверен, почему вышеизложенное неверно или почему неправильно размещать часть скрытия за пределами сценария (я новичок в JS/jQuery). Если бы кто-нибудь мог мне это объяснить, было бы здорово. Но этот код ниже работает. Я только что добавил простой оператор if/else.
$(".panel-header button").on("click", function() {
if ($(this).text() == "Show") {
$(this).text("Hide");

var panelToShow = $(this).parent().attr('rel');

$('#'+panelToShow).slideDown(300, function() {
$(this).addClass('active');
});
}
else {
$(this).text("Show");

var panelToHide = $(this).parent().attr('rel');

$('#'+panelToHide).slideUp(300, function() {
$(this).removeClass('active');
});
}

});


Подробнее здесь: https://stackoverflow.com/questions/445 ... -in-jquery