@EVGenyK_ch

Как показать дополнительный вопрос при отметке label toggle checkbox?

Есть стандартный переключатель, подскажите пожалуйста как реализовать такое: при нажатии на переключатель появлялись бы доп.поля, но изначально они должны быть скрыты, если важно то все вопросы будут на переключателях
- вопрос 1
- вопрос 2
-- вопрос 2.1
-- вопрос 2.2
- вопрос 3
и т.д.
<style>
    input[type=checkbox] {
  height: 0;
  width: 0;
  visibility: hidden;
}

label {
  cursor: pointer;
  text-indent: -9999px;
  width: 30px;
    height: 16px;
    background: #d3d3d3;
  display: block;
  border-radius: 100px;
  position: relative;
}

label:after {
  content: '';
  position: absolute;
      top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
  background: #fff;
  border-radius: 40px;
  transition: 0.3s;
}

input:checked + label {
      background: #0fb877;
}

input:checked + label:after {
  left: calc(100% - 2px);
  transform: translateX(-100%);
}

label:active:after {
}
</style>
<input type="checkbox" id="switch" /><label for="switch">Toggle</label>вопрос 1
<input type="checkbox" id="switch2" /><label for="switch2">Toggle</label>вопрос 2
<input type="checkbox" id="switch2-1" /><label for="switch2-1">Toggle</label>вопрос 2.1
<input type="checkbox" id="switch2-2" /><label for="switch2-2">Toggle</label>вопрос 2.2
<input type="checkbox" id="switch3" /><label for="switch3">Toggle</label>вопрос 3
  • Вопрос задан
  • 62 просмотра
Решения вопроса 1
MrDecoy
@MrDecoy Куратор тега CSS
Верставший фронтендер
Использовать селектор ~


Или создать модель в скрипте и по факту изменения значения в соответствующем инпуте генерировать разметку следующего вопроса и добавлять в dom.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы