Expandable Grid Snippet

// Add custom content to header
function enym_expandable_grid() { ?>
<div class="contacts-wrap">


	<div class="contacts">

		<figure class="dropdown vcex-image vcex-module wpex-clr textright dropbtn">
			<div class="vcex-image-inner wpex-relative wpex-inline-block" style="max-width:60px; margin-bottom:15px;">
				<a href="tel:0049410162640"><img width="60" loading="lazy" class="wpex-align-middle" src="/wp-content/uploads/2021/11/PW_Telefon_Icon.svg" alt="Telefonnummer"></a>
			</div>
			<div class="dropdown-content">
				<!--<div class="dd-title">Sie haben Fragen zu unseren Leistungen?</div>
				<p class="dd-text">Rufen Sie uns gerne zur Terminvereinbarung an:</p>-->
				<div class="dd-big"><a href="tel:0049410162640">04101/62640</a></div>
			</div>
		</figure>

		<figure class="dropdown1 vcex-image vcex-module wpex-clr textright dropbtn2">
			<div class="vcex-image-inner wpex-relative wpex-inline-block vc_custom_1631689000072" style="max-width:60px;">
				<a href="mailto:info@zahnarztpraxis-waldenau.de"><img width="60" loading="lazy" class="wpex-align-middle" src="/wp-content/uploads/2021/11/PW_Mail_Icon.svg" alt="E-Mail"></a>
			</div>
			<div class="dropdown-content1">
				<!--<div class="dd-title">Sie haben Fragen zu unseren Leistungen?</div>
				<p class="dd-text">Rufen Sie uns gerne zur Terminvereinbarung an:</p>-->
				<div class="dd-text"><a href="mailto:info@zahnarztpraxis-waldenau.de">info@zahnarztpraxis-waldenau.de</a></div>
			</div>
		</figure>

		<figure class="dropdown2 vcex-image vcex-module wpex-clr textright dropbtn2">
			<div class="vcex-image-inner wpex-relative wpex-inline-block vc_custom_1631689000072" style="max-width:60px;">
				<a href="/kontakt"><img width="60" loading="lazy" class="wpex-align-middle" src="/wp-content/uploads/2021/11/PW_Öffnungszeiten_Icon.svg" alt="Öffnungszeiten"></a>
			</div>
			<div class="dropdown-content2">
				<p class="dd-text"><?php echo do_shortcode( '[templatera id="648"]' ); ?></p>
			</div>
		</figure>

	</div>
</div>
<?php }
//add_action( 'wpex_hook_header_inner', 'my_custom_header_content', 999 );





/**
 *  Slider: OWL Shortcode
 */
function myprefix_count_post_terms( $atts ) {

	/**
	 *  Slider: Enqueue owl caroussel scripts
	 */
	wp_enqueue_script(
		'your-script', // name your script so that you can attach other scripts and de-register, etc.
		//'https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js', // this is the location of your script file get_template_directory_uri() .
		get_stylesheet_directory_uri().'/js/owl.carousel.min.js',
		array('jquery') // this array lists the scripts upon which your script depends
	);

	/**
	 *  Slider: CSS and JS to head 
	 */
?>

<style>
	.gallery-items { font-size: 0; }

	.gallery-item {
		display: inline-block;
		vertical-align: top;
		/* -webkit-transition: height 500ms ease;
		-o-transition: height 500ms ease;
		transition: height 500ms ease;*/
	}

	.gallery-expander {
		position: absolute;
		left: 0;
		right: 0;
		overflow: hidden;
		max-height: 0;
/*		-webkit-transition: max-height 500ms ease;
		-o-transition: max-height 500ms ease;
		transition: max-height 500ms ease;*/
	}

	.gallery-contents { position: relative; }

	.gallery-contents:after {
		display: block;
		position: absolute;
		bottom: 0px;
		left: 50%;
		margin-left: -30px;
		width: 0;
		height: 0;
		content: '';
		border-left: 30px solid transparent;
		border-right: 30px solid transparent;
		border-bottom-style: solid;
		border-bottom-width: 0px;
/*
		-webkit-transition: border-bottom-width 500ms ease;
		-o-transition: border-bottom-width 500ms ease;
		transition: border-bottom-width 500ms ease;*/
	}

	.gallery-item.active .gallery-contents:after { 
		border-bottom-width: 30px; 
		bottom: -50px;
	}


	ul {
		margin: 0;
		padding: 0;
		list-style: none;
		text-align: center;
	}

	.gallery-item {
		text-align: left;
		font-size: 25px;
		/* margin: 0 10px;*/
		/*  padding: 10px 0;*/
	}

	.gallery-item .thumbnail {
		position: relative;
		width: 333px;
		height: 333px;
		overflow: hidden;
		cursor: pointer;
	}

	.gallery-item .thumbnail > img {
		position: absolute;
		/*top: 50%;
		margin-top: -300px;*/
		max-width: 333px;
	}

	.gallery-item .title {
		text-align: center;
		margin-top: 20px;
		padding-bottom: 20px;
		text-transform: uppercase;
	}

	.gallery-contents:after { 
		border-bottom-color: #C3D0C7; 

	}

	.gallery-expander { 
		/*		background: #C3D0C7;*/ 
		margin-top: 40px;

	}

	.gallery-expander-contents {
		margin: 0 auto;
		width: 1000px;
		/*  padding: 20px 0;*/
		background: #C3D0C7;
		padding: 40px;
		border-bottom: 80px solid #fff;
	}

	@media (min-width: 640px) and (max-width: 999px) {

		.gallery-expander-contents { width: 640px; }
	}

	@media (max-width: 639px) {

		.gallery-expander-contents { width: 100%; }
	}

	.gallery-expander-contents:after {
		clear: both;
		display: table;
		content: '';
	}

	.gallery-expander-contents > div.col {
		float: left;
		width: 480px;
	}

	@media (min-width: 640px) and (max-width: 999px) {

		.gallery-expander-contents > div.col { width: 310px; }
	}

	@media (max-width: 639px) {

		.gallery-expander-contents > div.col {
			float: none;
			padding: 25px 20px 0;
			width: auto;
		}

	}

	.gallery-expander-contents > div.col + div.col { margin-left: 40px; }

	@media (min-width: 640px) and (max-width: 999px) {

		.gallery-expander-contents > div.col + div.col { margin-left: 20px; }

	}

	@media (max-width: 639px) {

		.gallery-expander-contents > div.col + div.col { margin-left: 0px; }

	}

	.gallery-expander-contents div.close {
		position: absolute;
		top: 10px;
		right: 20px;
	}

	.gallery-expander-contents div.title {
		font-weight: 500;
		color: #D28A3C;
	}

	.gallery-expander-contents div.contents {
		margin-top: 20px;
		margin-bottom: 20px;
		border-top: 1px solid #fff;
		/*  border-bottom: 1px solid #BCB098;*/
		padding: 10px 0;
		font-size: 17px;
		/*line-height: 24px;*/
		color: #fff;
	}

	.gallery-expander-contents div.image {
		max-width: 80px;
		float: right;
	}

	.gallery-expander-contents div.image > img {
		width: 100%;
		display: block;
		border-radius: 50%
	}

	.gallery-expander-contents .staff-entry-title,
	.gallery-expander-contents .staff-entry-position {
		text-align: left;		
	}
	
	.staff-entry-button {
		margin-top: 20px;
		color: #fff;
		display: block;
		font-size: 20px;
	}
	.staff-entry-button img {
		width: 30px;
		display: block;
		margin: 10px auto 0 auto;
	}

</style>

<?php 
	//}, 99 );

	// Shortcode Attributes: $atts['post_type']
	$atts = shortcode_atts(
		array(
			'post_type' => '',
			'taxonomy' => '',
		),
		$atts
	);

	// Set the arguments for the query: http://codex.wordpress.org/Template_Tags/get_posts#Usage
	$args = array(
		'post_type'		=> $atts['post_type'], // or 'post', 'page'
		'orderby' 		=> 'title', // or 'date', 'rand'
		'order' 		=> 'ASC', // or 'DESC'
		'numberposts'	=> -1, // -1 is for all
		//'category' 	=> $category_id,
		//'exclude'		=> get_the_ID()
	);

	// Get the posts and create my list
	$myposts = get_posts($args);
	$output = '<ul class="gallery-items">';

	if($myposts) {
		$i = 0;
		foreach ($myposts as $mypost) {
			$featured_img_url = get_the_post_thumbnail_url($mypost->ID, 'full');

			$uneven = ($i % 2 == 0 ? ' uneven' : '');

			$output .= '
			<li class="gallery-item '.$uneven.'">
			<div class="gallery-contents">
				<div class="thumbnail gallery-trigger"><img src="'.$featured_img_url.'" alt="" /></div>
				<div class="staff-entry-details">
					<div class="staff-entry-title">'.get_the_title($mypost->ID).'</div>
					<div class="staff-entry-position">'.get_post_meta( $mypost->ID, 'wpex_staff_position', true ).'</div>
					<div class="staff-entry-button">Mehr erfahren<img src="/wp-content/themes/total-child-theme/icons/Pfeil_weiss.svg"></div>
				</div>
			</div>

			<div class="gallery-expander">
				<div class="gallery-expander-contents">
					<!--<div class="gallery-trigger-close close">x</div>-->
					<div class="image"><img src="'.$featured_img_url.'" alt="" /></div>

					<div class="staff-entry-title">'.get_the_title($mypost->ID).'</div>
					<div class="staff-entry-position">'.get_post_meta( $mypost->ID, 'wpex_staff_position', true ).'</div>

				  	<div class="contents">'.get_post_field('post_content', $mypost->ID).'</div>			
				</div>
			</div>

			</li>';

			$i++;
		}
		wp_reset_postdata();
	}

	$output .= '</ul>


<script src="'. get_stylesheet_directory_uri() .'/js/jquery.imagelistexpander.min.js"></script>

<script>
//(function(global, $){
	//"use strict";

(function(global, $){
    $(".gallery-items").imagelistexpander({
        prefix: "gallery-"
    });
})(this, jQuery)

//})(this, jQuery)
</script>';
	return $output;

}
add_shortcode( 'expandable_grid', 'enym_expandable_grid' ); //use like [expandable_grid post_type='xxxx' taxonomy='category']