Блог

Главная - Вопросы по программированию - Отображение текста и Изменение Родительского размера при выборе переключателя

Отображение текста и Изменение Родительского размера при выборе переключателя

#html #css #forms #radio-button #css-animations

Вопрос:

Я создаю форму, в которой пользователь может выбрать один из трех вариантов с помощью переключателей. Когда пользователь выбирает один из вариантов, мне нужно отобразить некоторый текст под параметром, который действует как описание для соответствующего параметра. Контейнер, в котором содержится опция, должен увеличиться по высоте, чтобы соответствовать описанию.

Я пытался сделать это с помощью комбинации JS и CSS, но просто не могу понять, как отображать текст и увеличивать родительский контейнер при выборе опции. Я приложил свой код, видео и скриншоты ожидаемого результата. Был бы способ оживить его? Спасибо, что нашли время прочитать это :).

 .select {
  display: grid;
  border: 3px solid #385663;
  padding: 10px 27px 10px 27px;
  border-radius: 18px;
  width: 500px;
  margin: 25px;
}

.select-top {
  display: flex;
  align-items: center;
}
 
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Radio Button Selects</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="select">
        <div class="select-top">
          <input type="radio" name="options" id="option-1">
          <label for="option-1">
              <p>Option 1</p>
          </label>
        </div>
        <div>
          <p class="radio-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Beatae voluptatem autem, recusandae nesciunt incidunt saepe ratione illum numquam quod animi optio excepturi harum hic blanditiis qui et. Cupiditate, repellat facere?</p>
        </div>
    </div>
    <div class="select">
        <div class="select-top">
          <input type="radio" name="options" id="option-2">
          <label for="option-2">
              <p>Option 2</p>
          </label>
        </div>
        <div>
          <p class="radio-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Beatae voluptatem autem, recusandae nesciunt incidunt saepe ratione illum numquam quod animi optio excepturi harum hic blanditiis qui et. Cupiditate, repellat facere?</p>
        </div>
    </div>
    <div class="select">
        <div class="select-top">
          <input type="radio" name="options" id="option-3">
          <label for="option-3">
              <p>Option 3</p>
          </label>
        </div>
        <div>
          <p class="radio-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Beatae voluptatem autem, recusandae nesciunt incidunt saepe ratione illum numquam quod animi optio excepturi harum hic blanditiis qui et. Cupiditate, repellat facere?</p>
        </div>
    </div>
</body>
</html>

Ожидаемое поведение при выбореОжидаемое поведение, если оно не выбраноВидео Макет

Ответ №1:

Я исправил некоторые проблемы с HTML (теги неправильно закрыты, p внутри метки).

Это всего лишь один из способов сделать это. Это может быть немного неудобно, если есть много кнопок, но это неплохо, если их всего 3.

 // add a click function to each radio button, in one step.
$("input[type='radio']").on("click", function() {

  // first hide all radio-text paragraphs.
  $(".radio-text").css("display", "none");

  // show only the one you want, based on the id.
  switch ($(this).attr("id")) {
    case "option-1":
      $(".radio-text").eq(0).css("display", "block");
      break;
    case "option-2":
      $(".radio-text").eq(1).css("display", "block");
      break;
    case "option-3":
      $(".radio-text").eq(2).css("display", "block");
      break;
    default:
      // nada.
  }
}); 
 .select {
  display: grid;
  border: 3px solid #385663;
  padding: 10px 27px 10px 27px;
  border-radius: 18px;
  width: 500px;
  margin: 25px;
}

.select-top {
  display: flex;
  align-items: center;
}

/* start with all text hidden (i presume). */
.radio-text {
  display: none;
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="select">
  <div class="select-top">
    <input type="radio" name="options" id="option-1" />
    <label for="option-1">Option 1</label>
  </div>
  <div>
    <p class="radio-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
  </div>
</div>
<div class="select">
  <div class="select-top">
    <input type="radio" name="options" id="option-2" />
    <label for="option-2">Option 2</label>
  </div>
  <div>
    <p class="radio-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Beatae voluptatem autem, recusandae nesciunt incidunt saepe ratione illum numquam quod animi optio excepturi harum hic blanditiis qui et. Cupiditate, repellat facere?</p>
  </div>
</div>
<div class="select">
  <div class="select-top">
    <input type="radio" name="options" id="option-3" />
    <label for="option-3">Option 3</label>
  </div>
  <div>
    <p class="radio-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
  </div>
</div>

Комментарии:

1. Привет, спасибо, что нашли время ответить. Как вы думаете, есть ли способ оживить расширение элемента, как у меня в моем видео-макете? Еще раз спасибо.

2. Я не могу этого сделать из-за моих очков репутации.

3. Не знал, какая репутация требуется. Исправил это для тебя.

4. Спасибо, не могли бы вы знать, как обойти анимацию?

5. Попробуй переодеться .css("display", "block"); .slideToggle(); .

Метки: