slide down details list

dabblet.css

/* slide down details list */
@keyframes slideDown {
	    0% {
	        opacity: 0;
	        height: 0;
	    }
	    100% {
	        opacity: 1;
	        height: 20px;
	    }
	}
	details {
		max-width:400px;
	}
	details[open] > div {
	    animation-name: slideDown;
	    animation-duration: 200ms;
	    animation-timing-function:cubic-bezier(0, 0, 1, 0);
	    overflow:hidden;
	    padding-left: 18px;
	}
details p {
	margin: 0 0 0 0;
	padding: 0 0 5px 0;
}
details ul {
	margin : 0;
	padding:0;
}

dabblet.html

<details>
    <summary>First</summary>
    <div>
     	<p>Set the animation to run when details open</p>
    </div>
</details>
<details>
    <summary>Second</summary>
    <div>
	    <p>Set the height of the animation<br/>
	    to be the height of your smallest expected content.</p>
    </div>
</details>
<details>
    <summary>Third</summary>
    <div>
    	<p>Set the animation-timing-function  to ease-in in a desperate attempt to hide the inevitable snap</p>
    </div>
</details>
<details>
    <summary>Finally</summary>
    <div>
    	<p>Add a &lt;div /&gt; element to be the container for the content of the details element</p>
    	<p>Long text to accentuate the snap, this block is much taller than the shortest
    	one so the snap is worse</p>
    </div>
</details>

<p>I get pushed down in an, all be it, unpleasant fashion.</p>
<p>The way to get the best out of this is to set the animation height to the 
to the height of your smallest expected details content. 
</p>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"1","prefixfree":"1","page":"css"}

thanks that was helpful