JS/jQuery

Показать/скрыть блок текста на jQuery

Примеры как на jQuery и показывать скрывать определенный текст по клику на ссылку или кнопку.

1

Показ блока по клику

<a class="content_toggle" href="#">Показать текст</a>

<div class="content_more" style="display: none;">
    <p>Блок скрытого текста...</p>
</div>
$(".content_toggle").click(function(){
    $('.content_more').slideToggle(300);      
    return false;
});

/* 2й вариант: */
$(".content_toggle").click(function(){
    $(this).next().slideToggle(300);      
    return false;
});
2

Изменение текста в кнопке

<a class="content_toggle" href="#">Полный текст</a>

<div class="content_more" style="display: none;">
    <p>Блок скрытого текста...</p>
</div>
$(".content_toggle").click(function(){
    $('.content_more').slideToggle(300, function(){
        if ($(this).is(':hidden')) {
            $('.content_toggle').html('Полный текст');
        } else {
            $('.content_toggle').html('Скрыть текст');
        }                            
    });
    return false;
});
3

Изменение класса

<a class="content_toggle" href="#">Полный текст</a>

<div class="content_more" style="display: none;">
    <p>Блок скрытого текста...</p>
</div>
$(".content_toggle").click(function(){
    $('.content_more').slideToggle(300, function(){
        if ($(this).is(':hidden')) {
            $('.content_toggle').html('Полный текст');
            $('.content_toggle').removeClass('open');
        } else {
            $('.content_toggle').html('Скрыть текст');
            $('.content_toggle').addClass('open');
        }                            
    });
    return false;
});
06 декабря 2018
Применение масок ввода у полей форм значительно упрощает их использование, уменьшает количество ошибок и приводит...