дек
15
2015

Изучаем jQuery. Переключение элементов

...мы будем отображать элемент, если он скрыт, и скрывать его, если он отображается. Логика подобного типа, когда происходит переключение между двумя состояниями, называется toggle и является весьма полезной конструкцией. Переключение элементов между двумя состояниями настолько распространено, что многие jQuery-функции представлены в виде версий, позволяющих выполнять данную процедуру.

Если у пользователя по каким-то причинам отключён JavaScript, он увидит на странице кнопку, после нажатия на которой не последует никакой реакции.

Jeff BridgesMarion CotillardKiko Mizuhara

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('Показать');
    }
  });
});