Скрытие содержимого или hide на js
В js существует стандартная функция скрытия и раскрытия блоков на странице
hide — скрытие
show — раскрытие
Стандартная библиотека jquery-1.*.min.js помогает выполнить на странице скрытие и раскрытие данных. В этом посте я приведу пример кнопки и скрытия блока при клике по ней. Очень удобная возможность показать пользователю текст именно при клике по кнопке или же наоборот.
Незабываем подключить на html странице jquery, а дальше уже пишем html кнопочку и сам блок.
Наша задача состоит в том чтобы при клике по кнопе скрыть контент в блоке .block и при повторном клике раскрыть его.
Для этого напишем простую функцию на js
И так что в функции мы видим, первым это скрытие контента, при клике по кнопке с айди button мы сворачиваем контент в блоке с айди block и меняем айди кнопки с button на close, чтобы при повторном клике открыть данный блок, второе раскрытие контента, если кнопка с айди close мы раскрываем контент в блоке block и опять изменяем айди кнопки на button.
У всех свои вкусы и кто то может воспользоваться оператором if, это не столь важно, лишь бы все было понятно.
hide — скрытие
show — раскрытие
Стандартная библиотека jquery-1.*.min.js помогает выполнить на странице скрытие и раскрытие данных. В этом посте я приведу пример кнопки и скрытия блока при клике по ней. Очень удобная возможность показать пользователю текст именно при клике по кнопке или же наоборот.
Между делом хочу вам преподнести новый интернет магазин в котором вы найдете абсолютно все, от аксессуаров до большого ассортимента спортивных принадлежностей. Интернет магазин порадуем вас не только огромным выбором товаров, но и отличными ценами на них, посетить магазин pokoopka
Незабываем подключить на html странице jquery, а дальше уже пишем html кнопочку и сам блок.
<div id="button">кнопка</div>
<div id="block"><p>текст</p></div>
Наша задача состоит в том чтобы при клике по кнопе скрыть контент в блоке .block и при повторном клике раскрыть его.
Для этого напишем простую функцию на js
<script>
$(function(){
hide_block();
});
function hide_block()
{
$('#button').live('click', function(){
$.ajax({
success: function(data) {
$('#block').hide(600);
$('#button').attr('id','close');
}});
});
$('#close').live('click', function(){
$.ajax({
success: function(data) {
$('#block').show(600);
$('#close').attr('id','button');
}});
});
}
</script>
И так что в функции мы видим, первым это скрытие контента, при клике по кнопке с айди button мы сворачиваем контент в блоке с айди block и меняем айди кнопки с button на close, чтобы при повторном клике открыть данный блок, второе раскрытие контента, если кнопка с айди close мы раскрываем контент в блоке block и опять изменяем айди кнопки на button.
У всех свои вкусы и кто то может воспользоваться оператором if, это не столь важно, лишь бы все было понятно.
0 комментариев