JavaScript для верстальщикаУрок 14. Показать/Скрыть текст

Учимся открывать и скрывать блок текста спрятанный под ссылкой с надписью Read more.
При клике по ссылке, текст должен появиться, а надпись смениться на Hide. При повторном клике - текст скрывается, надпись меняется на прежнюю.

В разметке скрытый текст находится внутри спана с классом hidden и css-свойством
.hidden {
    display: none;
}

Ссылке Read more добавляем класс js-read-more, скрытому тексту класс js-block-content.

Отслеживаем клики по ссылкам с классом .js-read-more

$(".js-read-more").on("click", function(event) {

    });

Отменяем событие по умолчанию

event.preventDefault();

Чтобы контент отобразился при нажатии на ссылку, убираем у блога с контентом класс hidden

$(".js-blog-content").removeClass("hidden");

Сразу обнаруживаются два недостатка. Открывается весь скрытый контент всех блоков. И при повторном нажатии на ссылку контент не скрывается.
Для решения первого недостатка нужно связать контент и ссылку, при клике по которой он должен открываться. Можно сделать это при помощи id, указав его у контента и в качестве атрибута ссылки. Это хороший и правильный способ. Есть вариант попроще: так как контент, который нужно открыть, лежит непосредственно перед ссылкой, которая его открывает, воспользуемся атрибутом prev. Второй недостаток решаем заменой метода removeClass на toggleClass.

$(this).prev(".js-blog-content").toggleClass("hidden");

Дальше создаём переменную text в которой сохраняем текст, который был не ссылке, по которой мы только что кликнули.

var text = $this.text();

И создаём условие, которое говорит, что если текст был "Read More", его нужно изменить на "Hide", если текст был "Hide" его нужно изменить на "Read More".

if( text == "Read More" ) {
            $this.text("Hide");
        } else {
            $this.text("Read More");
        }
 Вот и всё.

Код полностью

    $(".js-read-more").on("click", function(event) {

        event.preventDefault();

        var $this = $(this),
            text = $this.text();

        if( text == "Read More" ) {
            $this.text("Hide");
        } else {
            $this.text("Read More");
        }

        $(this).prev(".js-blog-content").toggleClass("hidden");

    });