Практика JavaScript. Задача #7. Делаем раскрывающийся блок.Collapse

preview_player
Показать описание
Всем привет. В данном видео мы с вами начинаем решать разные задачи на нативном JavaScript!

В данном уроке мы с вами научимся делать раскрывающийся по клику блок.

Не ограничивай себя видеоуроками на YouTube!
Узнавайте еще больше полезной информации!

-----------------------------------------------------------------------------------
Не забываем, что самый лучший способ сказать "спасибо" - нажать кнопку "нравится" и скинуть ссылку на урок друзьям. Ничто другое так сильно не мотивирует автора продолжать работу :)
  1. FrontCoder
  2. javascript
  3. nativejs
  4. практика js
  5. javascript practice
  6. collapse
Рекомендации по теме
Практика JavaScript. Задача 0:06:10

Практика JavaScript. Задача #7. Делаем раскрывающийся блок.Collapse...

Практика JavaScript. Задача 0:11:18

Практика JavaScript. Задача #5-2. Делаем всплывающее окно. Modal window....

JavaScript. Практика. Часть 0:15:02

JavaScript. Практика. Часть 7.

Практика JavaScript. Задача 0:07:07

Практика JavaScript. Задача #6. Делаем индикатор скролла. Scroll Indicator...

Практика JavaScript. Задача 0:08:42

Практика JavaScript. Задача #5. Делаем всплывающее окно. Modal window....

Практика JavaScript. Задача 0:16:54

Практика JavaScript. Задача #1. Работаем с input.

JavaScript практика. Расширение 0:13:54

JavaScript практика. Расширение файла, булевые операции #7

Практика JavaScript. Задача 0:12:48

Практика JavaScript. Задача #3. Делаем красивый ввод текста. Обработка input...

Практика JavaScript — 0:34:06

Практика JavaScript — пишем туду лист на JavaScript | Уроки для новичков...

Практика JavaScript. Задача 0:41:03

Практика JavaScript. Задача #2. ToDo List.

Практика по JavaScript 0:00:59

Практика по JavaScript для новичков, Задача 20 #shorts

Практика JavaScript. Задача 0:06:33

Практика JavaScript. Задача #4. Делаем Progress bar

Практика по JavaScript 0:00:58

Практика по JavaScript для новичков, Задача 8 #shorts

Разнёс чужой код 0:00:15

Разнёс чужой код за 15 секунд. Часть 1 #код #айти #программирование #рефакторинг...

[5/10] Практика. Javascript 0:22:46

[5/10] Практика. Javascript с нуля

Урок №7 Практика 0:09:56

Урок №7 Практика JavaScript.

Уроки JavaScript | 0:05:25

Уроки JavaScript | Курсы JS | Урок №7 | Практика JS по пройденному материалу...

Урок №7. Основы 0:30:52

Урок №7. Основы JavaScript с нуля для начинающих (практика, часть 1)...

Практика по пользовательским 0:06:11

Практика по пользовательским функциям JavaScript Трепачёв ДП 7...

Урок 7. JavaScript. 0:20:14

Урок 7. JavaScript. Все о ES6 Классах (+ Практическое Применение)...

Уроки Javascript #5. 0:29:29

Уроки Javascript #5. Как Работать с DOM в JS? (+ 26 упражнений для полной прокачки)....

Как отучить ребенка 0:00:30

Как отучить ребенка играть в компьютерные игры и взяться за учебу?...

Практика по JavaScript 0:00:49

Практика по JavaScript для новичков, Задача 53 #shorts

JavaScript Практика - 0:04:28

JavaScript Практика - EVENT - Шарик на странице при клике на точку экрана шарик перемещается к ней 1...

Комментарии
Автор

БРАТЬЯ!БОГ СОЗДАЛ ТАКОЙ ПРЕКРАСНЫЙ МИР! ДАВАЙТЕ НЕ РАЗРУШАТЬ ЕГО!НЕТ ВОЙНЕ!☦❤🤗

xeither
Автор

Здравствуйте, а как сделать так, чтобы при нажатии показывался блок, а при повторном, закрывался? Но в блоке изображение, а не текст, и желательно открытие справа)

memxres.
Автор

Очень долго искал именно такой вариант решения моей проблемы!
Ведь если в content поместить table, то будет таблица отображаться полностью?
Но у меня не происходит ни какой реакции при нажатии на кнопку... :-(

nemecyoutube
Автор

Предположим, что раскрывающихся блоков у меня несколько, а в классе content вместо тега <р> стоит <a>, можно ли сделать так, чтобы перейдя по ссылке блок оставался открытым, а остальные блоки закрытыми

ФехтовальщикДранглика
Автор

On click или toggle, кому как удобно, через добавление класса с max height в высоту блока которую либо задаём либо так же через скрипт задаём в зависимости от высоты контента, все расходимся )

awenn
Автор

Есть что нибудь плохое в том, чтобы использовать, вместо max-height, display:hidden и менять на display:block и т.д.?

barracudochka
Автор

А если нужно не только тоглить текущий блок, а закрывать все остальные? Типо аккордеон, но с возможностью закрыть открытый блок

TsAex
Автор

А как сделать что бы при клике все остальные блоки закрывались? То есть если подумать можно каждый блок с кнопкой закинуть в блок и через js повесить на нее закрытие соседнего элемента при клике но вот вопрос, нужно то тогда убирать класс active у всех соседних кнопок, так как я новичок, понимание логики есть а вот как написать не имею представления, кто поможет?

awenn
Автор

БРАТЬЯ!БОГ СОЗДАЛ ТАКОЙ ПРЕКРАСНЫЙ МИР! ДАВАЙТЕ НЕ РАЗРУШАТЬ ЕГО!НЕТ ВОЙНЕ!☦❤

xeither
Автор

Добрый день. Полностью переписал код из видио однако столкнулся с проблемой. Сайт не работает, выскакивает синтаксическая ошибка, гугл ругается на строчку
Let coll =
Подскажите пожалуйста что сделать чтобы заработало.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.collapsible {
#777;
white;
pointer:
18px;
100%;
none;
left;
none;
15px;
}

.active,
.collapsible: hover {
#555;


.content {
padding: 0 18px;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
background-color: #f1f1f1;
}
</style>
</head>


<body>
<button class="collapsible">Open Collapsible</button>
<div class="content">

</div>

<script>
Let coll =
for (Let i = 0; i < coll.length; i++){
coll[i].addEventListener('click', function() {

content = this.nextElementSibling();
(content.style.maxHeight) {
= nule;

= content.scrollHeight + 'px'
}



}


</script>

</body>
</html>

snakeboa