(Pure CSS) Expand/collapse objects WITHOUT JAVASCRIPT

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;

}