I'm really hoping someone can help me. I am having issues with this page: http://dd-server.co.uk/vinetrail/producers/
Each region has a number of producers which are shown via collapsible divs. It's all working fine, but when you use the filter at the top of the page, it still works fine except the empty regions are still shown.
I want to use jQuery to detect the empty divs and hide the whole region, so only regions with producers are shown. Here is my code:
<div id="producer-list">
<?php
$region_group_terms = get_terms( 'producer_region' );
$c = 0;
$id = 'section1';
foreach ( $region_group_terms as $region_group_term ) {
$c++;
$producers_query = new WP_Query( array(
'post_type' => 'producers',
'orderby' => 'title',
'order' => 'ASC',
'tax_query' => array(
array(
'taxonomy' => 'producer_region',
'field' => 'slug',
'terms' => array( $region_group_term->slug ),
'operator' => 'IN'
)
),
'search_filter_id' => 788
) );
?>
<div class="pro-wrap">
<?php if($c == 1) : ?>
<div class="collapsible collapse-open" id="<?php echo $id; ?>"><h2><?php echo $region_group_term->name; ?><span></span></h2></div>
<?php else : ?>
<div class="collapsible" id="<?php echo $region_group_term->name; ?>"><h2><?php echo $region_group_term->name; ?><span></span></h2></div>
<?php endif; ?>
<div class="container">
<div class="content">
<?php
if ( $producers_query->have_posts() ) : while ( $producers_query->have_posts() ) : $producers_query->the_post(); ?>
<div class="one-quarter">
<?php if ( has_post_thumbnail() ) : ?>
<a href="<?php echo get_permalink(); ?>"><?php echo get_the_post_thumbnail(); ?></a>
<?php else : ?>
<a href="<?php echo get_permalink(); ?>"><img src="<?php echo get_template_directory_uri(); ?>/img/producer-default.jpg" alt="<?php echo the_title(); ?>" /></a>
<?php endif; ?>
<h3>
<a href="<?php echo the_permalink(); ?>">
<?php echo $region_group_term->name; ?>
<span><?php echo the_title(); ?></span>
</a>
</h3>
</div>
<?php endwhile; endif; ?>
<?php
$member_group_query = null;
wp_reset_postdata();
?>
</div>
</div>
</div>
<?php } ?>
</div>
You can try this, in jQuery
Try 1
jQuery( document ).ready(function() {
// Loop over hidden element with class container
jQuery.each(jQuery('.pro-wrap .container:hidden'), function(i, ele){
// Hide closest parent found with class pro-wrap
jQuery(ele).closest('.pro-wrap').hide();
});
});
Try 2
jQuery( document ).ready(function() {
// Loop over element with class content
jQuery.each(jQuery('.pro-wrap .container .content'), function(i, ele){
var jEle = jQuery(ele);
// If empty content
if (jEle.text().trim().length == 0) {
// Hide closest parent found with class pro-wrap
jEle.closest('.pro-wrap').hide();
}
});
});