[bevc]

I have an odd javascript/css problem that I can't figure out, and I keep leaving and coming back to.

I have 2 radio buttons in a pop-up form, one of which will be pre-selected when loaded. If 'yes' is already checked, a div will have a height of 100%, if 'no', the height should be 0px (making it invisible). If the user then checks the other button, the div will either slide up or down, to be visible or not.

This all works fine, except in the case when 'yes' is pre-checked - the div is correctly visible on page load, but when 'no' is clicked, the div just vanishes (rather than sliding smoothly). However, if the buttons are then clicked after that, it works as intended.

I've recreated this in a jsfiddle, the effect is the same (although I'm not sure why the text is still visible), the first time 'no' is clicked the div jumps, but after that it works as desired. I need to use js to clear out some values as well, so can't just do it in css.

This is my html:

Code

<input id='editpositive' class='form__radio-input' type='radio' name='subgroupEdit' value='editpositive' checked=checked/>
    <label class='form__radio-label' for='editpositive'>
       <span class='form__radio-button'></span>Yes</label>
<input id='editnegative' class='form__radio-input' type='radio' name='subgroupEdit' value='editnegative'/>
   <label class='form__radio-label' for='editnegative'>
      <span class='form__radio-button'></span>No</label>
        <div class='subgroupEdit-accordion-show'>
          STUFF GOES HERE
        </div>

css:

Code

.subgroupEdit-accordion-show {
   transition: height 0.5s ease-in-out;
   height: 100%;
}

js:

Code

const slideDown = element => element.style.height = `${element.scrollHeight}px`
const slideUp = element => element.style.height = `0px`
document.getElementById('editpositive').addEventListener('click', async (e) => {
   slideDown(document.querySelector('.subgroupEdit-accordion-show'))
    })

document.getElementById('editnegative').addEventListener('click', async (e) => {
  slideUp(document.querySelector('.subgroupEdit-accordion-show'))
   })

This seems to be particular to this circumstance and the 'height' css property, if I change the div height to '15px' or something, that kinda sorta works, but it starts out the wrong size and then it works correctly, so the problem is the same, and I suppose I could work out the correct pixelige, but I'd really much rather do this with a nice responsive '100%', especially as that works under every other condition except this particular one.  

Can anyone help me? Thanks.

[bevc]

Here you go: https://jsfiddle.net/ngrswfjz/8/

Thank you very much, but that actually just makes the div content 'invisible' after it has slid up rather than removing it, I need to make it slide up and shift the below elements up with it (it's in a modal, so submit button, bottom edge etc). That got me closer, so thank you.

[TyrantKingBen]

The reason it works starting from "yes" and after clicking "no" is because your JS is setting an absolute height value. The transition is not going to work using relative values.

The reason the text is still visible is you need to set the overflow to be hidden.

It is possible to accomplish this with just CSS if you know what the height of the element should be: https://jsfiddle.net/7bLvdg9c/.

Here is a working version of your original Fiddle (added initial call to slideDown/slideUp to set the height, removed height CSS, added overflow CSS): https://jsfiddle.net/6v5Ldang/1/.

[bevc]

Edit: Okay so I had a little fun with it. There is probably a simpler way to do this though:

https://jsfiddle.net/rf2q7Lmp/1/

If you want to use this solution, I'm happy to explain any of the code written.

Make sure you set the transitionSpeed constant to something less than 1. You're probably looking to use something around the 0.5 range.

The reason it works starting from "yes" and after clicking "no" is because your JS is setting an absolute height value. The transition is not going to work using relative values.

The reason the text is still visible is you need to set the overflow to be hidden.

It is possible to accomplish this with just CSS if you know what the height of the element should be: https://jsfiddle.net/7bLvdg9c/.

Here is a working version of your original Fiddle (added initial call to slideDown/slideUp to set the height, removed height CSS, added overflow CSS): https://jsfiddle.net/6v5Ldang/1/.

Thank you very much for both answers, I really appreciate the time you both took, worked a treat. Cheers.