Expanding Row

[razorpig]

Hi,

I’ve created some rows with hidden text which slides down when you hover over the row - a bit like an accordion. When the text is hidden I’d like the rows underneath to slide up to fill the available space.

Hovering over the sub-headings will reveal the text.

The only way I’ve managed to achieve the desired result is by setting a fixed height for the row but I don’t want the height to be fixed as it needs to adapt to different screen sizes. I want the content to slide smoothly up and down so switching between display:none and display:block doesn’t work either.

I hope this makes sense. Please let me know if you need further clarification.

Regards
Mark

[paul.r]

Hi Mark,

Try to set height to auto.

The password provided doesn’t seem to work.

I need to be able to see the page so I can check and provide a tailored answer.

Thanks

[razorpig]

Hi Paul,

Many thanks for your reply. Sorry about the password - it should be working now.

UPDATE : I did try using auto but the animation wasn’t smooth, it just jumped to the new height. I’ve now managed to resolve it ( sort of ) by using the max-height property and setting it to 110px for the collapsed row and 100vh for the expanded view (NB : You’ll notice I’ve also attached the animation to a button instead of on hover). This works quite nicely but it’s not ideal because 110px doesn’t work on small mobile screens when the headings wrap on to two lines. It’s no big deal as I can always just add a media query but maybe there’s a way to get the row height to automatically accommodate the content?

A much more important issue is this - I’m just getting started with JS and jQuery so I’m sure my custom code is probably rather clumsy. As you can see I’ve had to create unique IDs and classes and write separate code for each row ( Arthur, Surrealism, Philosophy ). If possible, I’d like this set up so I can just duplicate the rows and the new row will work without having to create new classes and write additional JS. I hope that makes sense ! Please let me know if you need further clarification.

Regards
Mark

[rad]

Hi Mark,

Seems to be working fine, and the only option is using @media since your defining code is mainly CSS (just toggled by javascript).

Thanks!