Изменить высоту DIV по клику на ссылку

@Рафик · Регистрация: 25.06.2013

Студворк — интернет-сервис помощи студентам

Всем привет.

Гуглил на тему, не смог найти решения. Прошу помощи у вас.

Можно ли на чистом CSS3 изменить высоту DIV по клику на ссылку?

Например, мне нужно свернуть/развернуть панель с плавной анимацией, при нажатии на кнопочку сворачивания.

Вот здесь привёл пример моего кода:
https://jsfiddle.net/0eyzxpo6/5/

Либо вот:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="liner">
  <div class="liner-header">
    <span class="liner-title">Заголовок</span>
    <a href="#" class="liner-right">
    ▼
    </a>
  </div>
  <div class="liner-main">
    Информация
    Много строк
    Разное количество строк
    </div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.liner {
    background: #f0f0f0;
}
 
.liner-header {
    background: #e5e5e5;
    height: 40px;
}
.liner-title {
    position: relative;
    top: 10px;
    left: 10px;
}
.liner-right {
    float: right;
    position: relative;
    top: 8px;
    right: 8px;
    width: 10px;
    padding: 5px;
    text-decoration: none;
}
.liner-main {
    padding: 10px;
}

Как сделать, чтобы при нажатии на значок ▼ окно сворачивалось до заголовка. И при повторном нажатии разварачивалось обратно. Получается что-то вроде спойлера. Не хотелось бы мудрить с JS.

@Mikhail Shell · 14.02.2018, 14:04

Сообщение от Рафик

Не хотелось бы мудрить с JS.

К сожалению, придется мудрить

Qwerty_Wasd · 14.02.2018, 14:46

Mikhail Shell, не придется. К примеру - песочница

HTML5
1
2
3
4
5
<div class="acc">
  <input id="acc_check" type="checkbox"/>
  <label for="acc_check">ТЫК ТЫК</label>
  <div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum vero quasi officiis dignissimos. Ex nesciunt eius voluptatibus aperiam consequatur magnam, rerum harum aspernatur ullam sequi maxime eos minima accusamus. Ex.</div>
</div>

CSS
1
2
3
4
5
6
7
*,*:after,*:before{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0;margin:0;outline:0}
html,body{width:100%}
.acc{width:60%;margin:0 auto;}
input#acc_check{position:absolute;clip:rect(0, 0, 0, 0)}
label[for="acc_check"]{display:block;height:30px;width:100%;line-height:30px;background:#B39DDB;text-align:center;border:2px solid;}
.text{height:0px;padding:0px;overflow:hidden;-webkit-transition:1s;-o-transition:1s;transition:1s;border:1px solid}
input#acc_check:checked~.text{height:120px}

@Mikhail Shell · 14.02.2018, 15:17

Не по теме:

Какое дежавю...
Вы в другой теме точно то же самое сказали)

Qwerty_Wasd · 14.02.2018, 15:33

Не по теме:

Mikhail Shell, да есть такое :) Не думайте дурного - я вас не подлавливаю. Иногда действительно можно обойтись без скриптов. Лишняя нагрузка..

@Mikhail Shell · 14.02.2018, 15:45

Не по теме:

Qwerty_Wasd, все ОК)

@Рафик · 15.02.2018, 05:24 **[ТС]**

Qwerty_Wasd, всё хорошо, но как быть, если я не знаю исходную высоту дива?
Я имею в виду, что таких дивов может быть несколько на странице и с разной высотой.

Qwerty_Wasd · 15.02.2018, 13:55

Рафик, замените height на max-height. И поиграйтесь transition - время анимации будет сильно зависеть от конечного max-height. К примеру -

CSS
1
2
3
4
5
6
7
*,*:after,*:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0;margin:0;outline:0}
html,body{width:100%}
.acc{width:60%;margin:0 auto;}
input#acc_check{position:absolute;clip:rect(0, 0, 0, 0)}
label[for="acc_check"]{display:block;height:30px;width:100%;line-height:30px;background:#B39DDB;text-align:center;border:2px solid;cursor:pointer}
.text{max-height:0px;padding:0px;overflow:hidden;transition:3s;border:1px solid}
input#acc_check:checked~.text{max-height:1000px}

@Рафик · 21.02.2018, 13:43 **[ТС]**

Qwerty_Wasd, всё работает замечательно. Огромное спасибо.
Да, с временем анимации и макс.высотой пришлось немного поиграться.

У меня ещё один небольшой вопросик.
Вот вы написали:

CSS
1
input#acc_check:checked~.text{max-height:1000px}

Получается это условие, если чекбокс активен, то у элемента с классом «text» макс.высота = 1000пкс.
А как туда добавить дополнительные классы? Пытался сделать по всякому, судя по логике должно быть что-то вроде:

CSS
1
2
input#acc_check:checked~.text{max-height:1000px}
input#acc_check:checked~.another_class{color: red}

Но, что-то не получается.

Qwerty_Wasd · 21.02.2018, 13:48

Рафик, такое правило сработает

CSS
1
input#acc_check:checked~.text

если:
1. у этих элементов один родитель
2. тот, что реагирует, должен стоять ниже в коде

@Рафик · 21.02.2018, 14:03 **[ТС]**

Qwerty_Wasd, спасибо. Буду пробовать.

Новые блоги и статьи Все статьи Все блоги /
Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .	Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .	Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .
SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .	SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .	Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .

Изменить высоту DIV по клику на ссылку

Решение

Решение

Решение

@Mikhail Shell
	14.02.2018, 15:17
	Не по теме: Какое дежавю... Вы в другой теме точно то же самое сказали) 0

Qwerty_Wasd
	14.02.2018, 15:33
	Не по теме: Mikhail Shell, да есть такое :) Не думайте дурного - я вас не подлавливаю. Иногда действительно можно обойтись без скриптов. Лишняя нагрузка.. 0

@Mikhail Shell
	14.02.2018, 15:45
	Не по теме: Qwerty_Wasd, все ОК) 0

@Рафик 2 / 2 / 1 Регистрация: 25.06.2013 Сообщений: 308
	15.02.2018, 05:24 [ТС]
	Qwerty_Wasd, всё хорошо, но как быть, если я не знаю исходную высоту дива? Я имею в виду, что таких дивов может быть несколько на странице и с разной высотой. 0

@Рафик 2 / 2 / 1 Регистрация: 25.06.2013 Сообщений: 308
	21.02.2018, 14:03 [ТС]
	Qwerty_Wasd, спасибо. Буду пробовать. 0