Tweak styling.

Add hidden capability.
Add JS to show on click.

templates/assets/css/advent-calendar.css

@@ -27,6 +27,12 @@
 
 .calendar_day_cell h2 {
 	text-align: center;
+	font-size: 400%;
+}
+
+.calendar_day_cell h2.middle {
+	position: relative;
+	top: 40%;
 }
 
 .calendar_day_cell img {
@@ -37,6 +43,25 @@
 	vertical-align: middle;
 }
 
-.advent-joke-answer {
+p.advent-motto,
+p.advent-joke-answer,
+.calendar_day_cell .day-image {
+	background-color: rgba(255, 255, 255, 0.25);
+}
+
+.hidden {
+	opacity: 0.0;
+	filter: alpha(opacity=0); /* For IE8 and earlier */
+}
+
+.hidden2 {
 	display: none;
 }
+
+p.advent-motto {
+	margin-bottom: 0em;
+}
+
+p.advent-joke-answer {
+	margin-bottom: 0;
+}

templates/assets/js/advent-calendar.js

+/* JavaScript for front end advent calendar */
+
+'use strict';
+
+jQuery( document ).ready( function ( $ ) {
+	$( '.content-area' ).on( 'click', '.calendar_day_cell', function ( event ) {
+		event.preventDefault(); // prevent normal click function
+
+		// find the image or video
+		let cell_image = $( this ).children( '.day-image.hidden' );
+		// if we found it, remove the hidden class to show it.
+		if ( cell_image ) {
+			cell_image.removeClass( 'hidden' );
+		}
+
+		// find the h2 and move it up.
+		let heading = $( this ).children( 'h2' );
+		if ( heading ) {
+			heading.removeClass( 'middle' );
+		}
+
+		// find the motto and display it
+		let motto = $( this ).children( '.advent-motto' );
+		if ( motto ) {
+			motto.removeClass( 'hidden' );
+		}
+
+		// if there is a joke answer make it clickable
+		let joke_answer = $( this ).siblings( '.advent-joke-answer' );
+		if ( joke_answer ) {
+			motto.on( 'click', function ( event ) {
+				event.stopPropagation(); // prevent normal click function
+				joke_answer = $( this ).siblings( '.advent-joke-answer' );
+				joke_answer.removeClass( 'hidden2' );
+			} );
+		}
+
+	} );
+
+} );
+