дек
15
2015
Изучаем jQuery. Переключение элементов
...мы будем отображать элемент, если он скрыт, и скрывать его, если он отображается. Логика подобного типа, когда происходит переключение между двумя состояниями, называется toggle и является весьма полезной конструкцией. Переключение элементов между двумя состояниями настолько распространено, что многие jQuery-функции представлены в виде версий, позволяющих выполнять данную процедуру.
Если у пользователя по каким-то причинам отключён JavaScript, он увидит на странице кнопку, после нажатия на которой не последует никакой реакции.
index.html
...
<input type="button" id="toggleButton" value="Показать"/>
<p id="disclaimer" style="display: none;">
<img src="pic-1.jpg">
<img src="pic-2.jpg">
<img src="pic-3.jpg">
</p>
...
script.js
$(document).ready(function(){
$('#toggleButton').click(function(){
$('#disclaimer').toggle();
if($('#disclaimer').is(':visible')) {
$(this).val('Скрыть');
} else {
$(this).val('Показать');
}
});
});