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

Как сделать чтобы при нажатии на кнопку появлялся блок

  • автор:

Как при нажатии кнопки получить блок div?

Как сделать так, чтобы при нажатии на «кнопку» на сайте под кнопкой появлялся блок DiV с готовым текстом каким-либо?

Отслеживать
задан 13 дек 2017 в 14:23
Vaagn Akopyan Vaagn Akopyan
429 1 1 золотой знак 4 4 серебряных знака 17 17 бронзовых знаков

3 ответа 3

Сортировка: Сброс на вариант по умолчанию

У блока, который ты хочешь открывать ставишь display: nonе. При помощи js ставишь обработчик на кнопку, который при нажатии изменяет display: none на display: block. Что-то типа этого:

function viewDiv()< document.getElementById("div1").style.display = "block"; >;
#div1
 
Блок

Отслеживать
ответ дан 13 дек 2017 в 14:38
58 6 6 бронзовых знаков
fixed -то зачем? о_О
13 дек 2017 в 14:50
@Qwertiy случайно написал. Сейчас изменю. Спасибо.
13 дек 2017 в 14:53

А почему onmousedown ? Т. е. 1. почему такая устаревшая форма добавления обработчика? и 2. почему mousedown вместо click?

13 дек 2017 в 14:57
Если не сложно, то можете реализовать актуальную форму обработчика?
14 дек 2017 в 17:35

Вот тоже интересный пример(Jquery)

$('.btn').click(function()< $(".block_with_text").fadeToggle(100); >); 
  
Lorem ipsum dolor sit amet

Отслеживать
ответ дан 14 дек 2017 в 16:06
651 4 4 серебряных знака 13 13 бронзовых знаков

Как вариант, можно и без js обойтись, это зависит от конкретной задачи и возможностей. Например, с помощью скрытого чекбокса и метки, которая будет выступать псевдокопкой, переключать видимость DIVа:

.text, input[type="checkbox"] < display: none; >input[type="checkbox"]:checked ~ .text < display: block; >/* Стилизация псевдокнопки */ .btn
 
Готовый текст

Как реализовать появление и исчезновение блока при нажатии на кнопку (на чистом JS)?

Добрый день!
Подскажите, пожалуйста, как реализовать появление и исчезновение блока при нажатии на кнопку (на чистом JS)?

Блок изначально «display:none;»
Подключен скрипт

function viewDiv()< document.getElementById("filters").style.display = "block"; >;

Подключил к кнопке атрибут onmousedown=»viewDiv()», но он только открывает блок, а чтобы закрыть — не закрывает.

Подскажите, как также добавить возможность скрытия заново в display: none?
Заранее огромное спасибо! (только учусь JS)

  • Вопрос задан более трёх лет назад
  • 4074 просмотра

1 комментарий

Простой 1 комментарий

Как при нажатии кнопки получить блок div?

6464e94a6ed64349491515.png

Всем привет,решил попрактиковаться и сделать верстку сайта,но столкнулся с проблемой
Как мне сделать,чтобы при нажатии на блок с названием фон размывался и появлялся другой блок с информацией

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

  • Вопрос задан 17 мая 2023
  • 147 просмотров

4 комментария

Простой 4 комментария

DanArst

Danny Arty @DanArst Куратор тега CSS

С помощью js. Имея лишь картинки, без кода, больше подсказать нечего

artkep @artkep Автор вопроса

 

ЭСКИМО

ФРУКТОВЫЙ ЛЁД

БРИКЕТЫ НА ВАФЛЯХ

САХАРНЫЕ РОЖКИ

ВАФЕЛЬНЫЕ СТАКАНЧИКИ

ПЛАСТИКОВЫЕ СТАКАНЧИКИ

БОЛЬШИЕ БРИКЕТЫ

КРУПНАЯ ФАСОВКА

delphinpro

Сергей delphinpro @delphinpro Куратор тега CSS

artkep, в простом варианте находите любой скрипт для модальных окон, читаете документацию. Делаете для каждого блока по модалке с нужной инфой. Соединяете всё это.

artkep @artkep Автор вопроса

Курсы javascript

Добрый день. Я далек от js но потребовалось реализовать скрипт.
Есть 10 div’ов (Условно присвоим им классы «odin», «dva», . «desiat».) и 4 кнопки. При нажатии на кнопку 1 должен исчезнуть/спрятаться/замениться див «odin» и на его месте появиться див «dva», при следующем нажатии должен див «dva» замениться на див «tri» и т. д. При нажатии на кнопку два все должно происходить в обратную сторону.
Кнопки 3 и 4 по умолчанию спрятаны. На 10 диве кнопка 1 должна быть заменена на кнопку 3. А на первом диве кнопка 2 должна заменяться на кнопку 4.
Ну или можно сделать кучу кнопок. Например в див «odin» вставляем кнопки «1» и «2», при нажатии на кнопку два див исчезает вместе с кнопками и появляется див «dva» с кнопками «3» и «4» и далее в таком духе.

Последний раз редактировалось Altos, 04.07.2018 в 11:19 .

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *