Show/Hide using animation

CSS: ( Sorry for the image, tools for code display on these forums is not great ) HTML:&nbsp; &lt;input type="checkbox" class="sheet-gear-show"&gt; &lt;div class="sheet-row sheet-gear-detail"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &lt;!-- HTML to show/hide --&gt; &lt;/div&gt; In action :&nbsp; <a href="https://www.screencast.com/t/lix1nDqtb" rel="nofollow">https://www.screencast.com/t/lix1nDqtb</a> This is basically just a variant of the checkbox show-hide that already exists in the css wizardy thread. But You'll notice both the selection checkbox is animated with a transform, and the show/hide itself doesn't actually rely on the display property. Instead it changes the height of the 'detail' page, and hides the border when it's 'unchecked'. The net result is you animate the change instead of the somewhat jarring experience of an immediate expansion. Thought this was worth sharing, as I don't see many sheets doing this, but it's a fairly simple way to add some jazz to the page.&nbsp;

This is very sexy.&nbsp; Thank you

I'm stealing borrowing that. ;-P This should be included on the CSS Wizardry wiki.&nbsp;

I'm glad sheet authors could make use of that little trick at least. I basically learned how to CSS on roll20 ( and now I'm a web developer haha ), so it's good to give back.&nbsp;

follow... I'm going to give this a try this weekend.

( Sorry for the image, tools for code display on these forums is not great ) Here's how to make it look decent: Copy the text from VS Code and paste it into the chat window Select all the text you just pasted Click the button that looks like an eraser in the toolbar above (between the S and the X) to remove formatting Then with all text still selected, click the dropdown on the very left button, and select Code It should look pretty decent. Even if it doesnt look decent, it's actually usable for people reading your posts: we can copy and paste it ourselves. A picture is absolutely useless in that regard. If you really want to include a picture, maybe consider including the text below the pic as well.