Playing with details and summary elements


by Jeremy Caudle
code

After spending some time improving the display of these code doodles through the use of details and summary elements, I thought I'd spend a few extra minutes trying to see if I can animate them.

Display the garbled message

Yesterday at 8:08 AM I askfjas d;lkjfo iwuefoij arboinoanfj iovjf; oijaig jrvwjrgojwr oigvnlncl vkjzxci ovjoisjafo ijweoifj;oawiej fiovhjodef kalsdjf lasdkj foidfjb oeiaj geawkfjlawejflkjgvo;ij;foib joij.

View the code:

HTML and JS 
<div class="codedoodle-block">
			<details><summary>Display the garbled message</summary><p>Yesterday at 8:08 AM I askfjas d;lkjfo iwuefoij arboinoanfj iovjf; oijaig jrvwjrgojwr oigvnlncl vkjzxci ovjoisjafo ijweoifj;oawiej fiovhjodef kalsdjf lasdkj foidfjb oeiaj geawkfjlawejflkjgvo;ij;foib joij.</p></details>
		</div>
CSS 
.codedoodle-block {
			max-width: 40em;
			margin: 1rem auto;
			padding: 1rem;
		}

		@keyframes fadein {
			from {opacity: 0;}
			to {opacity: 1;}
		}

		.codedoodle-block details {
			padding: 1rem;
			color: green;
			border: 1px solid red;
		}
		
		.codedoodle-block details > summary {
			display: inline-block;
			padding: .25rem;
			background-color: #fefefe;
		}
		
		.codedoodle-block summary:hover, .codedoodle-block summary:focus {
			background-color: rgb(255, 245, 245);
		}
		
		.codedoodle-block details[open] p {
			animation: fadein 1s ease-in-out 0s infinite alternate;
			color: red;	
		}

Tags