How to properly grow and shrink div with radio buttons?-CodePudding

I've figured out how to show and hide a div with radio buttons. However I also want the main div to grow and shrink depending on which value is selected to make room for more questions. The issue I'm having is if you click the yes option multiple times, the form grows and grows forever. and if you click no multiple times it shrinks to nothing.

I'm looking for a way to set a boolean that will only allow the form to grow once when yes if clicked and shrink once when no is clicked. I've attached some example code.

toggle();

function toggle() {
  var optionA = document.getElementById("yes");
  var optionB = document.getElementById("no");
  var question = document.getElementById("moreQuestions");
  var form = document.getElementById("form");
  var height = form.offsetHeight;
  var newHeight = height   200;
  var oldHeight = height - 200;

  // the condition checks: is option A is selected?
  if (optionA.checked) {
    // if "yes" is selected, then the question is shown
    // no input ("") uses the default display
    question.style.display = "";
    form.style.height = newHeight   'px';
  } else if (optionB.checked) {
    form.style.height = oldHeight   'px';
    question.style.display = "none";
  } else {
    // question is hidden if the "none" option is selected
    question.style.display = "none";
  }
}

.form {
  width: 400px;
  height: 400px;
  position: relative;
  margin: 5% auto;
  background: rgba(255, 255, 240, 0.733);
  padding: 0px;
  overflow: hidden;
  border-radius: 30px;
}

.radio {
  margin-left: 18px;
  margin-top: 3px;
  font-weight: normal;
}

.select-box {
  margin-left: 18px;
  margin-top: 3px;
  margin-bottom: 3px;
}

<div class="page"></div>
<div class="form" id="form">
  <div class="radio"><label>Show More?</label><br>
    <label><input id="yes" name="radio1" type="radio"  value="yes" onclick="toggle()" required="" />Yes</label><br>
    <label><input id="no" name="radio1" type="radio" value="no" onclick="toggle()" required="" />No</label><br><br>
  </div>
  <div id="moreQuestions">
    <select class="select-box">
      <option value="0">0</option>
      <option value="0.5">0.5</option>
      <option value="1">1</option>
      <option value="1.5">1.5</option>
      <option value="2">2</option>
      <option value="2.5">2.5</option>
      <option value="3">3</option>
      <option value="3.5">3.5</option>
      <option value="4">4</option>
      <option value="4.5">4.5</option>
      <option value="5">5</option>
    </select><br><br>
  </div>
</div>

<script>
</script>

CodePudding user response：

To achieve this you need replace onclick() event to onchange(). Also, i got an error while replicate your code. Created two functions for easy to use, for adding and removing heights.

Show code snippet

const optionA = document.getElementById('yes');
const optionB = document.getElementById('no');
const form = document.getElementById('form');
const question = document.getElementById('moreQuestions');
const expandHeight = 200;

const adding = () => {
  // Get current form height
  const formHeight = form.offsetHeight;
  question.style.display = '';
  // Set style with height added
  form.style.height = `${formHeight   expandHeight}px`;
};

const removing = () => {
  // Get current form height
  const formHeight = form.offsetHeight;
  question.style.display = 'none';
  // Set style with height removed
  form.style.height = `${formHeight - expandHeight}px`;
};

optionA.addEventListener('change', adding);
optionB.addEventListener('change', removing);

.form {
  width: 400px;
  height: 400px;
  position: relative;
  margin: 5% auto;
  background: rgba(253, 167, 141, 0.733);
  padding: 0px;
  overflow: hidden;
  border-radius: 30px;
}

.radio {
  margin-left: 18px;
  margin-top: 3px;
  font-weight: normal;
}

.select-box {
  margin-left: 18px;
  margin-top: 3px;
  margin-bottom: 3px;
}

<div class="page"></div>
<div class="form" id="form">
  <div class="radio">
    <label>Show More?</label><br />
    <label>
          <input
            id="yes"
            name="radio1"
            type="radio"
            value="yes"
            required=""
          />Yes
        </label>
    <br />
    <label>
          <input id="no" name="radio1" type="radio" value="no" required="" />No
        </label>
    <br /><br />
  </div>
  <div id="moreQuestions">
    <select class="select-box">
      <option value="0">0</option>
      <option value="0.5">0.5</option>
      <option value="1">1</option>
      <option value="1.5">1.5</option>
      <option value="2">2</option>
      <option value="2.5">2.5</option>
      <option value="3">3</option>
      <option value="3.5">3.5</option>
      <option value="4">4</option>
      <option value="4.5">4.5</option>
      <option value="5">5</option>
    </select><br /><br />
  </div>
</div>