Форум

white_raven · #1 (**permalink**) 08.09.2017, 01:12

Добрый день!
Прошу помочь разобраться с обработкой клика:
По сценарию необходимо, чтобы при клике на один из 4 блоков-кнопок плавно появлялся бы один большой информационный блок, в котором менялась бы информация в зависимости от того, на какой блок-кнопку изначально было нажато:
Вот мои потуги:
https://jsfiddle.net/2wf3b9pe/
Вроде даже работает, но выглядит как-то не изящно!
К тому же плавность появления никак не получается.
Интересует именно javascript без подключения библиотек.
Пожалуйста, раскритикуйте!)

рони · #2 (**permalink**) 08.09.2017, 01:24

white_raven,
https://javascript.ru/forum/dom-wind...tml#post451649

white_raven · #3 (**permalink**) 15.09.2017, 23:36

Рони, спасибо огромное, вы мне очень помогли! Это даже больше, чем было нужно) Единственное, может Вы меня ещё ткнете куда-нибудь, где можно посмотреть варианты чтобы "плавно появлялся бы один большой информационный блок" при клике? Менять при клике свойство display не подходит, нужно, чтобы блок с содержимым выезжал как бы из ниоткуда)

j0hnik · #4 (**permalink**) 15.09.2017, 23:52

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.block{
			width: 300px;
			height: 0;
			overflow: hidden;
			opacity: 0;
			transition: 2s;
		}
		.active{
			opacity: 1;
			height: 150px;
		}
	</style>
</head>
<body>
	<button>клик</button>
	<div class="block">Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Собрал свое даже проектах lorem, путь предложения злых текст на берегу ipsum, журчит скатился своих алфавит путь вершину ведущими свой живет.</div>
	<script>
		document.querySelector('button').onclick=function(){
			document.querySelector('.block').classList.add('active');
		};
	</script>
</body>
</html>

рони · #5 (**permalink**) 16.09.2017, 00:31

white_raven,
49 CSS Modal Windows

white_raven · #6 (**permalink**) 19.09.2017, 20:13

Спасибо, товарищи - подсобили!)

white_raven · #7 (**permalink**) 19.09.2017, 20:33

Сообщение от рони

white_raven,
https://javascript.ru/forum/dom-wind...tml#post451649

Но вот, Профессор, не подскажете ещё такой момент - мною была предпринята попытка изменить немного Ваш пример со слайдером https://jsfiddle.net/a54spqqs/
Необходимо, чтобы слайдер появлялся при клике на любой label, не обязательно первый, а получается, что он начинает работать, если кликнуть только на первый. Не помогёте?(

рони · #8 (**permalink**) 19.09.2017, 21:03

white_raven,

function sliderShow() {
            slider[0].classList.add("slidesStart")
        }

white_raven · #9 (**permalink**) 19.09.2017, 22:12

(( черт возьми, но почему!?
эх, тяжело в ученье(
но большое Спасибо!!

Форум

Справочник

Discord чат

Курсы javascript