Как сделать slideToggle() не блок, а flex?

Question

anriko @anriko

JavaScript

Как сделать slideToggle() не блок, а flex?

есть скрытый блок display:none, надо чтобы при появление был display:flex, но эффект остался

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

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

Подписаться 1 Простой 3 комментария

Виталий Першин @Get-Web Куратор тега JavaScript

Сделать обертку и таглить её, либо через callback менять block на flex

Написано более трёх лет назад

fixeri @fixeri

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		.newClass {
			display: flex;
		}
	</style>
	<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
	<button id="btn">VIEW</button>
	<div class="newClass">
		<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</div>
		<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</div>
		<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</div>
		<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</div>
		
	</div>

	<script type="text/javascript">
		"use strict";

		$(".newClass").slideToggle(0);

		$("#btn").on("click", function() {
			$(".newClass").slideToggle();
		});


	</script>
</body>
</html>

Написано более трёх лет назад

fixeri @fixeri

Значение CSS свойства display элемента сохраняются и восстанавливаются при необходимости. Например, если элемент имеет значение этого свойства inline, то при отображении элемента, после того как он был скрыт, значение свойства не изменится и будет по прежнему inline.

Написано более трёх лет назад

Помогут разобраться в теме Все курсы

Нетология

Fullstack-разработчик на Python + нейросети

20 месяцев

Далее
Skillfactory

Профессия Веб-разработчик

12 месяцев

Далее
Академия Eduson

Fullstack-разработчик на JavaScript

11 месяцев

Далее

Пригласить эксперта

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

JavaScript

Простой
Смещение группы в fabric.js?
- 1 подписчик
- 5 часов назад
- 49 просмотров
0

ответов
JavaScript

+2 ещё

Простой
Как сделать горизонтальный скролл стрелками?
- 1 подписчик
- вчера
- 109 просмотров
0

ответов
JavaScript

Простой
Как создать рисунок из PHP в Fabric.js?
- 2 подписчика
- 28 окт.
- 141 просмотр
1

ответ
JavaScript

+1 ещё

Простой
Какой скрипт загружает меню в Ютуб?
- 2 подписчика
- 27 окт.
- 246 просмотров
2

ответа
JavaScript

Простой
Как работать с разрозненными данными?
- 1 подписчик
- 21 окт.
- 237 просмотров
2

ответа
JavaScript

+1 ещё

Простой
Неправильно работает crypto.subtle.deriveKey в Firefox, баг или мой косяк?
- 2 подписчика
- 16 окт.
- 137 просмотров
0

ответов
JavaScript

Простой
Как подгружать xml с перерисовкой таблицы?
- 3 подписчика
- 14 окт.
- 189 просмотров
0

ответов
JavaScript

+2 ещё

Простой
Как решить задачку из контеста?
- 1 подписчик
- 13 окт.
- 265 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Есть ли js-библиотека для офлайн-распознавания русской речи?
- 1 подписчик
- 12 окт.
- 188 просмотров
2

ответа
JavaScript

Простой
Почему не работает в консоли setTimeout?
- 1 подписчик
- 11 окт.
- 348 просмотров
1

ответ
Показать ещё Загружается…

Fullstack Разработчик (Next.js / JavaScript / TypeScript)

App Company

от 200 000 до 300 000 ₽

Web-разработчик/WordPress программист (Full-stack)

JustBusiness • Санкт-Петербург

от 130 000 до 150 000 ₽

React разработчик

ITK academy • Нижний Новгород

от 50 000 до 90 000 ₽

Сделать обертку и таглить её, либо через callback менять block на flex
Значение CSS свойства display элемента сохраняются и восстанавливаются при необходимости. Например, если элемент имеет значение этого свойства inline, то при отображении элемента, после того как он был скрыт, значение свойства не изменится и будет по прежнему inline.

Как сделать slideToggle() не блок, а flex?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт