DEMOS  › A method of having Details/Summary with smooth transitions

Date : 13th October 2021

For all the latest browsers

Details/Summary with open/close 'height:auto' trans

Cascading

To fall quickly and in large amounts.
"Coins cascaded from/out of the fruit machine."

Style

A distinctive appearance, typically determined by the principles according to which something is designed.
"The pillars are no exception to the general style".

Sheet

A large rectangular piece of cotton or other fabric, used on a bed to cover the mattress and as a layer beneath blankets when these are used.
"Sleeping blankets and covers, sheets and quilts have been made - with the children's assistance."

Information

NO Javascript/jQuery/PHP.

A method of emulating transitions on height:auto and applying to html details/summary.

So click any of the three lines above with the left arrows and see the text slide down. Click again to see the text slide up.

This method uses line-height and translate on the text which makes it appear to be sliding.

I am still searching on a way to use writing mode with rotate.

The stylesheet for this demonstration is in the page head.

Please consider making a donation, every little helps.