Display Text and Change Parent Size on Radio Button Selection

Question

I am building a form where the user can select one of three options using radio buttons. When the user selects one of the options, I need to display some text under the option that acts as a description for the respective option. The container the encloses the option has to increase in height to fit the description.

I have tried doing this through a combination of JS and CSS but simply cannot figure out how to display the text and enlarge the parent container when an option is selected. I attached my code and a video and screenshots of the expected result. Would there be a way to animate it? Thank you for taking the time to read this :).

.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>

Expected Behavior when selected Expected Behavior when not selected Video Mockup

score 1 · Accepted Answer · answered Aug 07 '21 at 01:30

I fixed some HTML issues (tags not properly closed, p inside label).

This is just one way of doing it. It could get a bit awkward if there are a lot of buttons, but it's not bad with just 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>

Hi, thanks for taking the time to answer. Do you think that there's a way to animate the element expansion as I have in my video mockup? Thanks again. — Andrei Florian, Aug 07 '21 at 09:37
Try changing `.css("display", "block");` to `.slideToggle();`. — wazz, Aug 08 '21 at 18:50

Display Text and Change Parent Size on Radio Button Selection

1 Answers1