[Тоху]

I wrote this for some project I'm working on and recommended it be used for the menu here on the top left of the form for non-js compatibility, so I figured I'd post it here.

Here's all the CSS you need:
Spoiler (Click to View)

Code

@keyframes fadethisout {
   from {opacity: 1;}
   to {opacity: 0;}
}
@keyframes fadethisin {
   from {opacity: 0;}
   to {opacity: 1;}
}
input[type=checkbox]:checked ~ label[for="collapseobjlabel"]::before {
   content: "[ + ]";
   cursor: pointer;
}
input[type=checkbox]:not(:checked) ~ label[for="collapseobjlabel"]::before {
   content: "[ - ]";
   cursor: pointer;
}
input[type=checkbox]:not(:checked) ~ .collapseobj {
opacity: 1;
   max-height: 1000px;
   animation-name: fadethisin;
   transition: max-height 1s ease-in;
   animation-timing-function: ease-in;
   animation-duration: 1s;
}
input[type=checkbox]:checked ~ .collapseobj {
   opacity: 0;
   max-height: 0;
   animation-name: fadethisout;
   transition: max-height 1s ease-out;
   animation-timing-function: ease-out;
   animation-duration: 1s;
   overflow: hidden;
}

And some html:
Spoiler (Click to View)

Code

<input type="checkbox" name="one" id="collapseobjlabel" style="display: none;">
<label for="collapseobjlabel" ></label>
<div class="collapseobj">
Your stuff here
</div>

You may be able to substitute input[type=checkbox]:checked for #collapseobj:checked to use with multiple checkboxes, but I haven't tested this (though it is working here https://codepen.io/tomasz86/pen/wuzcK)

What's going on here?  Well, we're using the checkbox hack.  When the checkbox (which we give content to with css) is clicked, it will change the css of the collapseobj class, back and forth.

Now, I haven't positioned the button in that short little html snippet so you'll have to do it yourself.  But that's how it's done.

I've found using opacity fading with the animation makes it appear a little smoother.

Hope you all can employ this cool css trick and get rid of your JS! 🎉

[Rushax]

Great little nugget thanks for the share! Barely any CSS + no JS too, what a bonus.

[Ganja]

yeah this is a nice trick, I often use this to make dropdown/hamburger-menus without JS