Javascript Sliding a div smoothly to a height of 0px

[Javascript] Sliding a div smoothly to a height of 0px - Printable Version

+- Hack Forums (https://hackforums.net)
+-- Forum: Tech (https://hackforums.net/forumdisplay.php?fid=444)
+--- Forum: Coding (https://hackforums.net/forumdisplay.php?fid=151)
+---- Forum: Web Development (https://hackforums.net/forumdisplay.php?fid=183)
+---- Thread: [Javascript] Sliding a div smoothly to a height of 0px (/showthread.php?tid=6089541)

Sliding a div smoothly to a height of 0px - bevc - Jun 22, 2020

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.

RE: Sliding a div smoothly to a height of 0px - bevc - Jun 24, 2020

(Jun 23, 2020 07:54 AM)B2AD Wrote: 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.

RE: Sliding a div smoothly to a height of 0px - TyrantKingBen - Jun 24, 2020

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

RE: Sliding a div smoothly to a height of 0px - bevc - Jun 24, 2020

(Jun 24, 2020 03:59 PM)B2AD Wrote: 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.

(Jun 24, 2020 09:30 PM)TyrantKingBen Wrote: 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.