Cacher is the code snippet organizer for pro developers

<div id="sermon-archive">
    {% assign groupYear = "" %}
    {% assign groupMonth = "" %}
    {% assign sermons = List.Items | OrderBy: 'FieldValues.SermonDate', 'desc' %}  
    {% for Item in sermons %}
        {% assign sermonYear = Item.FieldValues.SermonDate | DateFormat: "yyyy", 'America/Chicago' %}
        {% unless groupYear == sermonYear %}
            <span class="sermon-year">{{ Item.FieldValues.SermonDate | DateFormat: "yyyy", 'America/Chicago' }}</span>
            {% assign groupYear = sermonYear %}
        {% endunless %}

        {% assign sermonMonth = Item.FieldValues.SermonDate | DateFormat: "MMMM", 'America/Chicago' %}
        {% unless groupMonth == sermonMonth %}
            <span class="sermon-month">{{ Item.FieldValues.SermonDate | DateFormat: "MMM", 'America/Chicago' }}</span>
            {% assign groupMonth = sermonMonth %}
        {% endunless %}
            <div class="single-sermon">
                <div class="play-head"><span></span></div>
                <div class="info">
                    <h4 class="sermon-name">{{ Item.FieldValues.SermonTitle }}</h4>
                    <span class="author">{{ Item.FieldValues.SermonSpeaker }}</span>
                    <span class="sermon-date">{{ Item.FieldValues.SermonDate | DateFormat: "MMM %d, yyyy" }}</span>
                    <span class="description">{{ Item.FieldValues.SermonDescription }}</span>
                    <div class="audio-player">
                        <audio controls>
                            <source src="{{ Item.FieldValues.SermonMp3 }}" type="audio/mpeg">
                        </audio>
                    </div>
                </div>
            </div>
    {% endfor %}
</div>

$('#sermon-archive').each(function() {

    // wrap the single sermons into a month 
    var aSermon = $(this).find('.single-sermon');
    for(var i=0; i < aSermon.length;) {
        i += aSermon.eq(i).nextUntil(':not(.single-sermon)').andSelf().wrapAll('<div class="month-group" />').length;
    }
    // wrap all of the months into a single month group
    $(".sermon-month").each(function() {
        $(this).next(".month-group").andSelf().wrapAll("<div class='whole-month' />");
    })
    // wrap all of the months into a single group
    var groupedMonths = $(this).find('.whole-month');
    for(var i=0; i < groupedMonths.length;) {
        i += groupedMonths.eq(i).nextUntil(':not(.whole-month)').andSelf().wrapAll('<div class="grouped-months" />').length;
    }

    // wrap all of the groups into a single year
    $(".sermon-year").each(function() {
        $(this).next(".grouped-months").andSelf().wrapAll("<div class='year-group' />");
    })

    $(".single-sermon").click(function() {
        $(this).toggleClass("active");
    })

    $(".whole-month").each(function() {
        var monthBtn = $(this).find(".sermon-month");
        var monthGroup = $(this).find(".month-group");
        monthBtn.click(function() {
            monthGroup.toggleClass("active");
            monthBtn.toggleClass("active");
        })
    })
    $(".year-group").each(function() {
        var yearBtn = $(this).find(".sermon-year");
        var yearGroup = $(this).find(".grouped-months");
        yearBtn.click(function() {
            yearGroup.toggleClass("active");
            yearBtn.toggleClass("active");
        })
    });
    $(".year-group:first-of-type").each(function() {
        $(this).find(".sermon-year, .grouped-months").addClass("active");
        $(this).find(".sermon-month").first().addClass("active");
        $(this).find(".month-group").first().addClass("active");
    });
});

$sfturq: #285b65;

#sermon-archive {
	.year-group {
		span.sermon-year {
			font-size: 20px;
			padding: 5px 10px;
			border: 1px solid $sfturq;
			cursor: pointer;
			display: inline-block;
			margin-top: 5px;
			transition: all .33s ease;

			&:hover,
			&.active {
				background: $sfturq;
				color: white;
			}
		}

		.grouped-months {
			opacity: 0;
			visibility: hidden;
			z-index: hidden;
			display: none;

			.whole-month {
				span.sermon-month {
					font-size: 18px;
					padding: 5px 10px;
					border: 1px solid $sfturq;
					display: inline-block;
					cursor: pointer;
					margin: 5px auto;
					transition: all .33s ease;

					&:hover,
					&.active {
						background: $sfturq;
						color: white;
					}

				}

				.month-group {
					opacity: 0;
					visibility: hidden;
					z-index: -1;
					display: flex;
					display: none;
					flex-direction: column;
					justify-content: flex-start;
					flex-wrap: wrap;
					transition: all .33s ease;

					.single-sermon {
						width: 450px;
						max-width: 100%;
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						cursor: pointer;
						border-radius: 10px;
						margin: 10px;
						height: 130px;
						background: white;
						position: relative;
						transition: all 0.33s ease;
						transition-delay: .33s;
						box-shadow: 0 5px 8px rgba(0, 0, 0, .2);

						@media (max-width: 767px) {
							flex-basis: 100%;
							margin: 10px 0;
						}

						.play-head {
							border-top-left-radius: 5px;
							border-bottom-left-radius: 5px;
							flex-basis: 25%;
							min-width: 100px;
							background: $sfturq;
							position: relative;
							transition: all .33s ease;

							span:before {
								position: absolute;
								content: "\f04b";
								left: 50%;
								top: 50%;
								transform: translate(-50%, -50%);
								font-family: fontawesome;
								color: white;
							}
						}

						.info {
							flex-basis: 70%;
							border-radius: 10px;
							position: relative;
							padding: 10px;
							transition: all .33s ease;

							.sermon-name {
								font-size: 14px;
								line-height: 1.5;
							}

							.author {
								font-style: italic;
								font-size: 14px;
								display: block;
							}

							.sermon-date {
								display: block;
								font-size: 14px;
								font-weight: bold;
							}

							.description {
								display: block;
								font-size: 15px;
								height: 100px;
								opacity: 0;
								z-index: -1;
								visibility: hidden;
								margin: 25px 0;
								overflow-y: auto;
							}
						}

						.audio-player {
							transition: all 0.33s ease;
							transition-delay: 0s;
							bottom: 0;
							opacity: 0;
							z-index: -1;
							visibility: hidden;
							width: 100%;

							audio {
								width: 100%;
							}
						}

						// the sermon is active
						&.active {
							transition: all .33s ease;
							height: 350px;

							.play-head {
								flex-basis: 0;
								min-width: 0;
								opacity: 0;
								z-index: -1;
								visibility: hidden;
							}

							.info {
								flex-basis: 100%;
								padding: 10px 30px;

								.description {
									opacity: 1;
									visibility: visible;
									z-index: 1;
								}

								.audio-player {
									transition-delay: .33s;
									opacity: 1;
									z-index: 1;
									visibility: visible;

									audio {
										position: relative;
										bottom: 0;
									}
								}
							}
						}
					}

					&.active {
						display: flex;
						opacity: 1;
						z-index: 1;
						visibility: visible;
					}
				}
			}

			&.active {
				display: block;
				opacity: 1;
				z-index: 1;
				visibility: visible;
				margin-bottom: 50px;
			}
		}
	}
}