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

Question

anriko @anriko

JavaScript

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

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

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

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.

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

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

Skillbox

JavaScript

3 месяца

Далее
Яндекс Практикум

Фронтенд-разработчик расширенный

13 месяцев

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

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

11 месяцев

Далее

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

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

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

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

JavaScript

+2 ещё

Средний
E2EE + WEB = поищем безопасность?
- 1 подписчик
- 20 дек.
- 208 просмотров
2

ответа
JavaScript

Средний
Как сделать, чтобы легенды не «наежали» на график?
- 1 подписчик
- 19 дек.
- 108 просмотров
1

ответ
JavaScript

+2 ещё

Средний
Как можно реализовать что то вроде селекта внутри родителя у которого есть скрытые элементы и должна быть горизонтальная прокрутка?
- 2 подписчика
- 11 дек.
- 169 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Как идентифицировать проксированные ошибки?
- 1 подписчик
- 05 дек.
- 141 просмотр
1

ответ
JavaScript

+2 ещё

Простой
Как сделать резкое переключение слайдов?
- 1 подписчик
- 03 дек.
- 185 просмотров
0

ответов
JavaScript

Простой
Как сделать чтоб условия не перезаписывались?
- 1 подписчик
- 02 дек.
- 257 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Элемент стилизации на js, как сделать чтобы не было резкой смены картинки фона?
- 1 подписчик
- 27 нояб.
- 228 просмотров
1

ответ
JavaScript

Простой
Переход по ссылке с параметром на конкретный узел в vis.js?
- 1 подписчик
- 24 нояб.
- 121 просмотр
0

ответов
JavaScript

+1 ещё

Простой
Как сделать сложную виртуализацию?
- 1 подписчик
- 22 нояб.
- 301 просмотр
2

ответа
JavaScript

Простой
В цикле for много кнопок как сделать .addEventListener('click', к каждой кнопке?
- 1 подписчик
- 16 нояб.
- 326 просмотров
3

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

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

MakeDifference

от 60 000 до 110 000 ₽

Frontend-разработчик (Vanilla JS, high-load media platform)

Karma8

от 200 000 до 300 000 ₽

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

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

от 50 000 до 90 000 ₽

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

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

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

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

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