Скрытие содержимого или hide на js

В js существует стандартная функция скрытия и раскрытия блоков на странице
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 комментариев

Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.