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

Question

anriko @anriko

JavaScript

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

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

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

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 ещё

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

ответов
JavaScript

+1 ещё

Простой
Как закрыть рекомендации rutube iframe?
- 1 подписчик
- 15 часов назад
- 57 просмотров
0

ответов
JavaScript

Простой
Как отключить strictMode у плагина intl-tel-input?
- 1 подписчик
- 20 часов назад
- 47 просмотров
1

ответ
JavaScript

Простой
Что происходит со свойством класса при присвоении извне?
- 1 подписчик
- вчера
- 78 просмотров
4

ответа
JavaScript

+1 ещё

Простой
Как правильно застримить большой поток из exec(...).stdout в ответ сервера?
- 1 подписчик
- вчера
- 55 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Как запускать только текущее (открытое) видео в слайдере swiper?
- 2 подписчика
- вчера
- 106 просмотров
1

ответ
JavaScript

+1 ещё

Средний
Как определить инлайн стиль и заменить на соответствующие теги?
- 1 подписчик
- вчера
- 57 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Писал ли кто-то автотесты с помощью Cypress по виджетам на amCharts 5? Можете помочь разъяснить структуру и синтаксис этого дела?
- 2 подписчика
- 28 нояб.
- 53 просмотра
0

ответов
JavaScript

Простой
Как не прекращая цикл пройтись?
- 1 подписчик
- 27 нояб.
- 108 просмотров
0

ответов
JavaScript

Средний
Можно ли прописать формулу расчёта с нефиксированной скидкой?
- 1 подписчик
- 27 нояб.
- 68 просмотров
1

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

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

Rocket • Смоленск

от 80 000 до 130 000 ₽

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

div. • Ставрополь

от 40 000 до 90 000 ₽

Fullstack разработчик JavaScript, php

Дорстрой-36 • Воронеж

от 100 000 до 200 000 ₽

Разработка Лендинга

30 нояб. 2024, в 10:52

900 руб./в час

Фронтендер-верстальщик на react для интернет-магазина

30 нояб. 2024, в 06:32

800 руб./в час

Реализовать бекенд для небольшого веб-приложения

30 нояб. 2024, в 03:37

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

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

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

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

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

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