JQuery скрыть показать элемент при клике

Последнее обновление на 16.12.2022

Пример кода, как с помощью библиотеки JQuery и методов hide() (позволяет скрывать html элементы), show() (позволяет отображать выбранные html элементы) создать простой эффект показа и скрытия html элементов.

Пример работы как на JQuery скрыть элемент при клике и показать элемент при клике. Нажмите на кнопку снизу, что проверить как работает функция. При нажатие на кнопку скрыть зеленый квадратная фигура исчезнет, при нажатие на кнопку показать — зеленая фигура снова появится. Если в hide(), show() поставить параметр скорости 1000, то есть hide(1000), show(1000), то квадрат будет скрываться или показываться с замедлением в 1 секунду.

Аналогично в Javascript применяется свойство style.visibility, где элемент во время скрытия не удаляется из потока:

document.getElementById(myid).style.visibility = «visible»; // показать

document.getElementById(myid).style.visibility = «hidden»; // скрыть

А с использованием свойства style.display, где элемент при скрытие удаляется из потока:

document.getElementById(myid).style.display = »; // показать

document.getElementById(myid).style.display = ‘none’; // скрыть