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

Question

anriko @anriko

JavaScript

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

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

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

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

+3 ещё

Простой
Как стилизовать пагинацию постов по определённому признаку?
- 1 подписчик
- 17 часов назад
- 64 просмотра
1

ответ
JavaScript

+2 ещё

Простой
Как отобразить массив из элементов?
- 1 подписчик
- 17 часов назад
- 80 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Неизвестные скрипты на сайте (plupload и moxie). Для чего?
- 1 подписчик
- 21 час назад
- 104 просмотра
1

ответ
JavaScript

+2 ещё

Простой
Как сделать так, чтобы звезда падала только при скролле страницы?
- 1 подписчик
- 22 часа назад
- 78 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Почему вылезает второй слайд?
- 1 подписчик
- 23 часа назад
- 38 просмотров
1

ответ
JavaScript

Простой
Почему в букмарклете должным образом не выполняется Alt + Click?
- 1 подписчик
- вчера
- 45 просмотров
1

ответ
JavaScript

Средний
Как создать кроссбраузерный функиональный плеер?
- 1 подписчик
- вчера
- 65 просмотров
0

ответов
JavaScript

+1 ещё

Средний
Почему функция mnemonicToWalletKey из библиотеки тон генерирует неверный адрес кошелька?
- 1 подписчик
- вчера
- 48 просмотров
1

ответ
JavaScript

+1 ещё

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

ответ
JavaScript

Простой
Проблема с добавлением полей товара в куки, почему-то при клике ничего в куки не записывает, что делать?
- 1 подписчик
- вчера
- 33 просмотра
2

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

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

summer • Ярославль

от 100 000 до 140 000 ₽

Junior JavaScript Developer

КРАФТТЕК • Санкт-Петербург

от 60 000 до 80 000 ₽

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

Мэтч

от 80 000 ₽

Обработать массив фотографий

19 апр. 2024, в 08:46

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

Скрыть / убрать лишние поля в форме заказа

19 апр. 2024, в 07:30

1500 руб./в час

Доработать телеграм бота

19 апр. 2024, в 03:52

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

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

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

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

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

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