Всех друзей поздравляем с Новым годом! Всего вам самого наилучшего! Всех благ, здоровья а материальное приложится!
СКРИПТЫ althtmlcssphpjsblog

Плавно скрыть показать блок по клику пример

Поддержи проект!!!

Плавное появление и исчезновение блока при нажатии! Сегодня будем с этим разбираться!

Сразу скажу, что в программировании возможно множество вариантов… данный код появления и исчезновение блока был написан потому, что в сети не нашлось достойного варианта! Простого! Понятного! Огромные портянки кода… в которых ногу можно сломать!

Пишите просто! Иначе потом сами не поймете. Что понаписали…

Навигация по странице :
  1. Плавное появление и исчезание блока при нажатии JavaScript
  2. Альтернативный скрипт - Плавное появление и исчезание блока при нажатии JavaScript
  3. Плавное появление блока css при клике jquery
  4. Живые примеры плавного появления и скрытия блока
  5. Скачать скрипты плавного появления и скрытия блока
  1. Плавное появление и исчезание блока при нажатии JavaScript

    №1 пример первого варианта.

    Html код выдвижного блока:

    1). Нам потребуется блок, в котором будет сидеть весь контент, и который будет плавно задвигаться-выдивгаться:

    <div class="block" id="theid">

    здесь контент

    </div>

    2). Во внутрь помещаем крест, по нажатию на который наш блок будет двигаться:
    <div id="iks">X</div>
    3). Соберем html вместе:

    <div class="block" id="theid"><div id="iks">X</div>

    здесь контент

    </div>

    Script код выдвижного блока:

    Нам нужно обратиться к тегу , будем использовать querySelector:

    click_iks = document.querySelector ('#iks');

    theid = document.querySelector ('#theid');

    На нажатие(onclick) по крестику повесим функцию:

    click_iks . onclick = function( ) {

    в которой и будем проверять наличие - отсутствие класса, который и будет выполнять движение влево вправо.

    Проверяем содержит ли(contains) класс(classList) под именем hide в переменной theid:
    if ( theid . classList . contains('hide') )

    Если да(блок задвинут), то hide удаляем, show добавляем:

    theid . classList . remove('hide');

    theid . classList . add('show' );

    Если нет(блок выдвинут),то задвигаем панель...:

    theid . classList . add('hide');

    theid . classList . remove('show');

    Соберем все вместе...

    <script>

    click_iks = document.querySelector ('#iks');

    theid = document.querySelector ('#theid');

    click_iks . onclick = function( ) {

    if ( theid . classList . contains('hide') )

    {

    theid . classList . remove('hide');

    theid . classList . add('show' );

    }

    else

    {

    theid . classList . add('hide');

    theid . classList . remove('show');

    }

    }

    </script>

    Все стили из одного места

    Результат :плавное появление блока на странице при клике JavaScript

  2. Альтернативный скрипт - Плавное появление и исчезание блока при нажатии JavaScript

    Чем данный вариант пример №2 отличается от выше идущего пункта!?
    1). Эти две строки не нужны, удалим их:
    click_iks = document.querySelector ('#iks');
    theid = document.querySelector ('#theid');
    2). Заменим click_iks на название ид theid - так тоже будет работать! Только теперь блок может плавно выезжать и скрываться не только точно нажимая по крестику, но и в том месте, где невидимо развернут блок с id+theid :

    <script>

    theid . onclick = function( ) {

    if ( theid . classList . contains('hide') )

    {

    theid . classList . remove('hide');

    theid . classList . add('show' );

    }

    else

    {

    theid . classList . add('hide');

    theid . classList . remove('show');

    }

    }

    </script>

    Все остальное копия первого варианта.

  3. Плавное появление блока css при клике jquery

    См.результат на отдельной странице

    Чем отличается данный вариант плавного появления блока css при клике jquery - этот вариант скрипт написан на jquery. Естественно,что вы должны подключить jquery, нам понадобится:

    hasClass

    removeClass

    addClass

    Мы как-то разбирали несколько вариантов появление и исчезновение блока при перезагрузке страницы теория, живой пример, а эта тема основана на css той страницы, только с той разницей, что здесь мы данный код css, который отвечает за появление и исчезновения блока - будем присваивать этому блоку, после чего css должен сработать!
    Единственное, что добавим… ещё нам потребуется движение влево

    <div class="share" id="share"><div id="to_right">X</div>

    здесь вы можете расположить все,что угодно...

    </div>


    Css стили для всех трех вариантов плавного появления скрытия блока

    .share_hide

    {

    left: -40px;

    animation:textt 1s;

    }

    @keyframes textt {

    from { left: 4px;}

    to {left: -40px;}

    }

    и движение вправо…

    .share_show

    {

    left: 4px;

    animation:texttt 1s;

    }

    @keyframes texttt {

    from { left: -40px;}

    to {left: 4px;}

    }

    Напишем функцию(click), которая будет работать при каждом клике на объект с ид = to_right

    И далее будем проверять есть ли класс «share share_hide»

    Если есть будем очищать класс(removeClass) и добавлять (addClass) тот, который будет показывать……

    Если нет, тоже самое, только добавляем класс, который будет прятать

    Не забываем, что это написано с использованием jquery

    <script>

    $("#to_right").click(function() {

       if ( $("#share").hasClass("share share_hide") )

       {

       $("#share").removeClass( );

       $("#share").addClass("share share_show");

       }

       else

       {

       $("#share").removeClass( );

       $("#share").addClass("share share_hide");

       }

    });

    </script>

    Можно написать короче...

    <script>

    $("#to_right").click(function() {

       if ( $("#share").hasClass("share share_hide") )

       {

       $("#share").removeClass().addClass("share share_show");

       }

       else

       {

       $("#share").removeClass().addClass("share share_hide");

       }

    });

    </script>

    И для того, чтобы css скрытие и показывание блока срабатывала нам нужно в первом случае добавить стиль, который задвинет наш блок влево за край монитора, и сделаем условие, если этот стиль присутствует, то ничего не делаем, если нет, то добавляем другой стиль..

  4. Примеры плавного появления и скрытия блока по клику

    Плавное появление блока на странице при клике JavaScript

    Пример без querySelector

    Плавное появление блока с использованием jquery

    См.еще выдвижная панель + живой пример

  5. Скачать скрипты плавного появления и скрытия блока

    Обновил архив - добавил первый вариант - это файл block_hide_and_show0_1.html

Вас может еще заинтересовать список тем : #JS | #JS_JQUERY | #JS_CLASS | #CLICK |
Последняя дата редактирования : 2020-02-28 07:04
Название скрипта :Появление блока при нажатии(показать, скрыть)
Скрипт № 44.3
Пример
Ссылка на скачивение: Все скрипты на одной странице
Теги:
скрыть показать блок по кликупоказать скрыть блок jquery показать скрытый блок показать скрыть блок jquery скрыть показать блок +по клику js показать скрыть блок jquery скрыть показать блок при клике

Последние комментарии :
Александр :
04/06/2020 01:42
Спасибо)
подробнее.
admin :
20/05/2020 10:36
Как бы смешно это не звучало! Но! Запускается новая система комментирования COMMENTS+ 1.5. в тестовом режиме!От…
подробнее.
Паула :
21/05/2020 04:48
Вообще мне очень нравится, что вы делаете! И ваш подход! И ваш стиль!И не обращайте внимание на всяких…
подробнее.
admin :
21/05/2020 05:03
Я Вас помню! Вы частенько оставляли сообщения на сайте!Все никак не мог спросить!? У Вас есть сайт -> зачем это…
подробнее.

НАШИ ПРОЕКТЫ : Проекты находятся в разной степени готовности (просто их столько, что времени не хватает…) Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru! © 2015 - 2020 Мы на лучшем хостинге -> ruweb