Поиск
Показаны результаты для тегов 'div'.
Найдено: 2 результата
-
jQuery плавно показать скрыть блок div
Печенег опубликовал запись в блоге в Заметки Программиста HTML CSS JS PHP
Скрываем содержимое блока div или другого элемента html и реализовываем плавное разворачивание и сворачивание блока по нажатию на ссылку, кнопку или любой другой элемент. Пример HTML верстки <div class="full__desc"> <a href="#">Показать полное описание!</a> <div class="hide">Спрятанный текст. Спрятанный текст. Спрятанный текст. Спрятанный текст. Спрятанный текст. Спрятанный текст. Спрятанный текст. Спрятанный текст.</div> </div> Код JavaScript $(function() { $('.full__desc .hide').hide(); $('.full__desc a').on('click', function(event) { event.preventDefault(); $('.full__desc a').not(this).next().slideUp(500); $(this).next().slideToggle(500); }); }); Вот и всё! Рабочий пример ниже. Пример See the Pen jQuery плавно показать скрыть блок div by ITwing (@itwing) on CodePen. -
Поменять местами div блоки вертикально. Flexbox CSS.
Печенег опубликовал запись в блоге в Заметки Программиста HTML CSS JS PHP
Краткая заметка по вертикальной смене порядка блоков <div> и других элементов документа html: Поддержка браузерами HTML <div class="group_block"> <div class="block_1">1й элемент</div> <div class="block_2">2й элемент</div> <div class="block_3">3й элемент</div> </div> CSS .group_block { display: flex; flex-direction: column; /* flex-direction: column-reverse; /* Включает обратный порядок */ } .group_block .block_1 {order: 3; } /* Отобразится третьим */ .group_block .block_2 {order: 2; } /* Отобразится вторым */ .group_block .block_3 {order: 1; } /* Отобразится первым */ CSS flexbox (Flexible Box Layout Module) — модуль макета гибкого контейнера — представляет собой способ компоновки элементов, в основе лежит идея оси. По ссылке ниже можно ознакомиться более подробно. https://html5book.ru/css3-flexbox/-
- позиционирование
- div
-
(и ещё 2 )
C тегом: