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");
});
При клике по ссылке, текст должен появиться, а надпись смениться на 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");
});