Types and Views: Accordion Spoiler with Custom Post Types

types-accordion.css

.federal-program {
  overflow:hidden;
  margin:40px;
  text-decoration: none;
  display: block;
  color: white;
  flex:0 1 auto;
  overflow:hidden;
  max-width:100%;
  padding:20px 30px 15px;

}

.fed .su-spoiler-title {
  color:#fff;
  font-size:20px;
  text-transform:uppercase;
  font-family: 'FrutigerLTPro-Black';
  letter-spacing:1px;
  padding-left:40px !important;
  padding-top:5px !important;
}

.su-spoiler-icon {
  font-size:28px !important;
}


@media screen and (max-width:800px){
  .federal-program {
    margin:0 0 5px 0;
    max-width:800px;
  }
}

types-accordion.html

  [wpv-layout-start]
	[wpv-items-found]
	<!-- wpv-loop-start -->
	<wpv-loop>
[su_accordion class="fed"]
  <div class="federal-program" style="background-color:[types field="program-background" output="raw"][/types];">[su_spoiler  icon="chevron" title="[wpv-post-title]"][types field="program-copy"][/types][/su_spoiler]
</div>
[/su_accordion]
	</wpv-loop>
	<!-- wpv-loop-end -->
	[/wpv-items-found]
	[wpv-no-items-found]
		[wpml-string context="wpv-views"]<strong>No items found</strong>[/wpml-string]
	[/wpv-no-items-found]
[wpv-layout-end]