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

Question

anriko @anriko

JavaScript

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

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

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

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.

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

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

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

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

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

JavaScript

+1 ещё

Простой
Почему onClick срабатывает два раза?
- 1 подписчик
- 01 янв.
- 255 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как запустить языковую модель на JavaScript?
- 2 подписчика
- 01 янв.
- 2369 просмотров
1

ответ
JavaScript

Средний
Как проверить наличие объекта на сайте js TamperMonkey?
- 1 подписчик
- 30 дек. 2024
- 94 просмотра
2

ответа
JavaScript

+1 ещё

Простой
Как сделать чтоб класс менялся только у одного элемента?
- 1 подписчик
- 29 дек. 2024
- 163 просмотра
0

ответов
JavaScript

Средний
Как приостановить setInterval на время и снова продолжить tampermonkey?
- 1 подписчик
- 29 дек. 2024
- 77 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как исключить дергания блока с меню при раскрытии подменю?
- 1 подписчик
- 29 дек. 2024
- 88 просмотров
0

ответов
JavaScript

+2 ещё

Простой
Как ограничить доступ определенному пользователю в своем телеграмм боте?
- 1 подписчик
- 29 дек. 2024
- 189 просмотров
2

ответа
JavaScript

+1 ещё

Простой
Как сделать ширину блока по ширине контента?
- 1 подписчик
- 28 дек. 2024
- 127 просмотров
1

ответ
JavaScript

Простой
Как найти и сгруппировать элементы с одинаковым классом?
- 1 подписчик
- 27 дек. 2024
- 98 просмотров
1

ответ
JavaScript

+2 ещё

Средний
Как скроллить определенный блок Div?
- 1 подписчик
- 27 дек. 2024
- 201 просмотр
0

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

Бэкэнд-разработчик JavaScript

Wanted. • Москва

от 250 000 до 400 000 ₽

JavaScript Fullstack

OnClass

от 2 000 до 7 000 $

JavaScript FullStack developer

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

До 220 000 ₽

Разработка мини приложени (скрипта) для фермы тг

05 янв. 2025, в 16:04

10000 руб./за проект

Joomla 1.5 вставить таблицу цен на страничку

05 янв. 2025, в 14:50

1000 руб./за проект

Верстка сайта по макету

05 янв. 2025, в 13:41

6000 руб./за проект

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

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

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

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

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