Какой плагин или инструмент посоветуете для такого раскрывающегося окна?

Question

что посоветуете для реализации вот такого окна, которое открывается при нажатии на плюсик и закрывается при нажатии на минус?

Answer 1

Такая штука называется "спойлер" и есть куча вариантов реализации.
Несмотря на то, что существует "хардварный" способ реализации (<details>), у него нет поддержки в IE.

По этому предложу вариант на label + input

.spoiler {
  display: block;
  width: 100%;
}

.spoiler:not(:last-child) {
  border-bottom: 1px solid #666;
}

.spoiler > input[type="checkbox"] {display: none;}

.spoiler > label {
  display: block;
  width: 100%;
  padding: 5px 0;
  font-weight: bold;
  position: relative;
  cursor: pointer;
}

.spoiler > label::after,
.spoiler > label::before {
  content: '';
  display: block;
  width: 16px;
  height: 2px;
  background: #666;
  position: absolute;
  top: 50%;
  right: 0;
}

.spoiler > label::after {
  transform: translateY(-50%);
}

.spoiler > label::before {
  transform: translateY(-50%) rotate(90deg);
}

.spoiler__hidden {
  display: none;
  margin-top: 10px;
  padding-bottom: 10px;
}

.spoiler > input:checked ~ label::before {
  display: none;
}

.spoiler > input:checked ~ .spoiler__hidden {
  display: block;
}

<div class="spoiler">
  <input type="checkbox" id="spoiler-1"/>
  <label for="spoiler-1">Спойлер 1</label>
  <div class="spoiler__hidden">Содержимое спойлера 1</div>
</div>

<div class="spoiler">
  <input type="checkbox" id="spoiler-2"/>
  <label for="spoiler-2">Спойлер 2</label>
  <div class="spoiler__hidden">Содержимое спойлера 2</div>
</div>

Если всё таки нужен вариант на <details>

.spoiler {
  display: block;
  width: 100%;
}

.spoiler:not(:last-child) {
  border-bottom: 1px solid #666;
}

.spoiler > summary {
  display: block;
  width: 100%;
  padding: 5px 0;
  font-weight: bold;
  position: relative;
  cursor: pointer;
}

.spoiler > summary::after,
.spoiler > summary::before {
  content: '';
  display: block;
  width: 16px;
  height: 2px;
  background: #666;
  position: absolute;
  top: 50%;
  right: 0;
}

.spoiler > summary::after {
  transform: translateY(-50%);
}

.spoiler > summary::before {
  transform: translateY(-50%) rotate(90deg);
}

.spoiler__hidden {
  display: none;
  margin-top: 10px;
  padding-bottom: 10px;
}

.spoiler[open] > summary::before {
  display: none;
}

.spoiler[open] > .spoiler__hidden {
  display: block;
}

<details class="spoiler">
  <summary>Спойлер 1</summary>
  <div class="spoiler__hidden">Содержимое спойлера 1</div>
</details>

<details class="spoiler">
  <summary>Спойлер 2</summary>
  <div class="spoiler__hidden">Содержимое спойлера 2</div>
</details>

Answer 2

Это делается и без плагинов, на CSS3 трансформациях. К примеру, есло нужна плавность, можно использовать scaleY(0), либо через свойство opacity.

css3-transform тут больше информации и выбор оптимального решения под вашу задачу.

БЛОГ НА HUSL

Какой плагин или инструмент посоветуете для такого раскрывающегося окна?

Ответы (2 шт):