Всех друзей поздравляем с Новым годом! Всего вам самого наилучшего! Всех благ, здоровья а материальное приложится!
СКРИПТЫ 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
Название скрипта :Появление блока при нажатии(показать, скрыть)
Скрипт № 45.3
Пример
Ссылка на скачивение: Все скрипты на одной странице
//dwweb.ru/comments_1_5/include/img/hand_no_foto.png
no
no
Еще никто не прокомментировал! COMMENTS+   BBcode
аватар
🞨
Загрузить свой аватар
(max ширина, высота = 200px)

Подписаться + =
Теги:
скрыть показать блок по кликупоказать скрыть блок jquery показать скрытый блок показать скрыть блок jquery скрыть показать блок +по клику js показать скрыть блок jquery скрыть показать блок при клике

Последние комментарии :
Марат :
02/09/2020 03:25
Рад, что помог! Приходите еще!
подробнее.
Алексей :
02/09/2020 01:16
Спасибо Кое-что пригодилось!
подробнее.
Павел :
26/08/2020 05:57
textarea В таблице, а таблица в родительском div, а этот див является частью аккордеона, сам textarea без displey: none, но…
подробнее.
Марат :
26/08/2020 04:22
Столько написали и ничего не понятно!У вас есть textarea со свойством "display: none;" - непонятно... зачем textarea скрытый и…
подробнее.
Павел :
26/08/2020 08:02
Здравствуйте. Пишу плагин для таблицы, в таблице много textarea, плагин и таблица расположены в скрытой вкладке…
подробнее.