mercredi 2 mai 2018

Hidden Checkbox Styling

Can you set properties on input[type=checkbox]:checked + myContainer from Javascript?

I'm using a hidden checkbox technique for expand/collapse functionality for varying height content in repeating elments. I'd like to set the max-height of the content in myContainer when the checkbox is checked beforehand using javascript based on the height of the actual content.

For example, I currently have a single height for all of my containers like:

.myContainer {
  max-height: 100px;
}

input[type=checkbox]:checked + .myContainer {
  max-height: 1000px;
}

This works, however I don't want to overcompensate the height on content that is much smaller than 1000px, as it slows the transition. I'd like the max-height of input[type=checkbox]:checked + .myContainer to be calculated with javascript based on the dynamic content height.




Aucun commentaire:

Enregistrer un commentaire