[css] problemen met het maken van een slide i.c.m. checkbox

[Spin1]

Heb een scriptje van een andere site om een uitschuifmenu te maken, nu werkt deze perfect op 1 detail na.
HTML:
<input id="slider" type="checkbox"><label>Weergeven/verbergen</label>
<div id="wrap">
<div id="slider">

</div>
</div>

CSS:
#slider {
overflow-y: hidden;
max-height: 200px;
-webkit-transition: all .5s cubic-bezier(0, 1, 0.5, 1);
transition: all .5s cubic-bezier(0, 1, 0.5, 1);
background: blue;
height: inherit;
width: inherit;
}

#slider:checked ~ #wrap > #slider {
max-height: 0;
}

Het probleem is. Het menu is standaard uitgeschoven en op het moment van aanvinken weer ingeschoven. Nu moet dit iets met de laatste CSS code te maken hebben.

Hoe kan ik in eerste instantie niets tonen en pas bij checkbox "checked" de div laten sliden/zien?

[ Voor 4% gewijzigd door Spin1 op 19-11-2014 21:38 ]

[Zeg]

Heb het probleem opgelost door de max-height van #slider standaard op 0 te zetten, en pas bij het aanvinken op 200px te zetten, zoals hier.

Ik heb ook even het ID van de checkbox aangepast, omdat je nu twee keer hetzelfde ID gebruikt, en deze dienen maar één keer per pagina gebruikt te worden.

De animatie krijg ik zo op de vroege morgen niet helemaal gefixt.