Develop Reference

How to activate an inactive tab woocommerce category products without click

Currently, the store is made to display products in certain tabs. This is the code I have in loop-start.php
<?php
/**
* Product Loop Start
*
* This template can be overridden by copying it to yourtheme/woocommerce/loop/loop-start.php.
*
* HOWEVER, on occasion WooCommerce will need to update template files and you
* (the theme developer) will need to copy the new files to your theme to
* maintain compatibility. We try to do this as little as possible, but it does
* happen. When this occurs the version of the template file will be bumped and
* the readme will list any important changes.
*
* #see https://docs.woocommerce.com/document/template-structure/
* #package WooCommerce\Templates
* #version 3.3.0
*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
?>
<section class="deals-wrapper product-list">
<div class="container">
<ul class="nav nav-tabs row justify-content-between" id="dealsTab" role="tablist">
<?php
$i = 0;
$categories = get_terms( array(
'taxonomy' => 'product_cat'
) );
foreach ( $categories as $key => $category ) {
$catname = $category->name;
$metaterms = get_term_meta($category->term_id);
$thumbnail_id = get_woocommerce_term_meta($category->term_id, 'thumbnail_id', true );
$image = wp_get_attachment_url( $thumbnail_id );
//$terms = get_the_terms( $category->ID, 'product_cat' )
$display_category_on_shop_page = get_field('display_category_on_shop_page',$category);
if($display_category_on_shop_page == "Yes"){
?>
<li class="nav-item col-lg-2 col" role="presentation">
<a class="nav-link <?php if($i == 0){ $i++; ?> active <?php } ?>" id="<?php echo $category->slug ?>-tab" data-toggle="tab" href="#<?php echo $category->slug ?>" role="tab" aria-controls="<?php echo $category->slug ?>" aria-selected="true">
<img src="<?php echo $image; ?>" alt="apple" />
<span><?php echo $catname; ?></span>
</a>
</li>
<?php } } wp_reset_postdata(); ?>
</ul>
<div class="tab-content" id="dealsTabContent">
<?php
$i = 0;
foreach($categories as $key => $category) {
?>
<div class="tab-pane fade <?php if($i == 0){ $i++; ?> show active <?php } ?>" id="<?php echo $category->slug ?>" role="tabpanel" aria-labelledby="<?php echo $category->slug ?>-tab">
<div class="deal-tiles" id="accordionExample<?php echo $category->slug ?>">
<?php
$c = 1;
$count = 1;
$args = array(
'post_type' => 'product',
'posts_per_page' => 20,
'product_cat' => $category->slug,
'orderby' => 'meta_value_num',
'order' => 'ASC',
'meta_key' => '_price',
'post_status' => 'publish'
);
$loop = new WP_Query( $args );
if( $loop->have_posts()) :
while ( $loop->have_posts()) :
$loop->the_post();
$p_id = wc_get_product()->get_id();
$image = wp_get_attachment_image_src( get_post_thumbnail_id( $id ), 'single-post-thumbnail' );
$currency = get_woocommerce_currency_symbol();
$name = get_the_title();
$link = get_the_permalink();
$product = wc_get_product(get_the_ID());
$thePrice = $product->get_price();
?>
<div class="deal-wrapper">
<div class="deal-tile">
<div class="text-center deal-head">
<h5>
<?php echo get_the_title(); ?>
</h5>
</div>
<div class="deal-body">
<div class="deal-img row">
<div class="deal-phone-img">
<a href="<?php echo $link; ?>" class="product-items">
<img src="<?php echo $image[0]; ?>" class="img-fluid" alt="phone" />
</a>
</div>
<div class="deal-phone-details">
<div class="deal-part1">
<h3>
<?php echo get_field('phone_detail_gb_data',$p_id); ?>
</h3>
<?php
while(have_rows('phone_detail_unlimited_data',$p_id)) : the_row();
$text = get_sub_field('text');
?>
<p>
<?php echo $text; ?>
</p>
<?php endwhile; wp_reset_postdata(); ?>
</div>
<div class="deal-part2 d-flex justify-content-between">
<div class="deal-part2-details">
<?php
if($product->get_type() == "simple"){
?>
<h5>
<?php echo get_field('network_price_text',$p_id); ?>
<?php echo $currency; echo $product->regular_price; ?>pm</h5>
<h5 class="our-price">
<?php echo get_field('our_price_text',$p_id); ?> :
<?php echo $currency; echo $product->sale_price; ?>pm</h5>
<h6>
<?php echo get_field('upfront_cost',$p_id); ?>
<?php echo get_field('upfront_cost_text',$p_id); ?>
</h6>
<?php
}else{
$product_variations = $product->get_available_variations();
$variation_product_id = $product_variations [0]['variation_id'];
$variation_product = new WC_Product_Variation( $variation_product_id );
$variation_min_price = $product->get_variation_price();
$price_regular_min = $product->get_variation_regular_price();
$price_sale_min = $product->get_variation_sale_price();
?>
<h5 class="network-price">
<?php echo get_field('network_price_text',$p_id); ?>
<?php echo $currency; echo $price_regular_min; ?>pm</h5>
<h5 class="our-price">
<?php echo get_field('our_price_text',$p_id); ?> :
<?php echo $currency; echo $price_sale_min; ?>pm</h5>
<!-- <?php if ( $price_html = $product->get_price_html() ) : ?>
<span class="price"><?php echo $price_html; ?></span>
<?php endif; ?> -->
<h6>
<?php echo get_field('upfront_cost',$p_id); ?>
<?php echo get_field('upfront_cost_text',$p_id); ?>
</h6>
<?php
}
?>
</div>
<div class="deal-part2-img">
<img src="<?php echo get_field('ee_image',$p_id)[" url "]; ?>" alt="">
</div>
</div>
</div>
</div>
<div class="deal-footer">
<div class="row deal-img justify-content-around">
buy now
view detail
<!-- <div id="heading<?php echo $count; ?>">
<h5 class="mb-0 lern-more-btn collapsed" data-toggle="collapse" data-target="#collapse<?php echo $count; ?>" aria-expanded="false" aria-controls="collapse<?php echo $count; ?>">
<span><?php echo get_field('learn_more_text',$p_id); ?></span>
<span><?php echo get_field('minimise_text',$p_id); ?></span>
</h5>
</div> -->
</div>
<div id="collapse<?php echo $count; ?>" class="collapse multi-collapse deal-desc">
<ul class="card-body">
<?php
while(have_rows('product_details',$p_id)) : the_row();
$text = get_sub_field('text');
?>
<li>
<p>
<?php echo $text; ?>
</p>
</li>
<?php endwhile; wp_reset_postdata(); ?>
</ul>
<div class="features-wrapper">
<?php $product_other_detail = get_field('product_other_detail',$p_id); ?>
<span class="features-ttl"><?php echo $product_other_detail["heading"]; ?></span>
<ul class="features-desc">
<?php
while(have_rows('product_other_detail',$p_id)) : the_row();
while(have_rows('other_details',$p_id)) : the_row();
$text = get_sub_field('text');
?>
<li>
<?php echo $text; ?>
</li>
<?php endwhile; endwhile; wp_reset_postdata(); ?>
</ul>
</div>
</div>
</div>
<div class="compare-btn">
<input type="checkbox" id="compare<?php echo $count; ?>" class="chkbox" data-name="<?php echo htmlspecialchars($name, ENT_QUOTES, 'UTF-8'); ?>" data-price="<?php echo $currency; echo $thePrice; ?>pm" data-image="<?php echo $image[0]; ?>" />
<label class="mb-0 ml-1" for="compare<?php echo $count; ?>">Compare</label>
</div>
</div>
</div>
</div>
<?php $count++; endwhile; endif; ?>
</div>
</div>
<?php } wp_reset_postdata(); ?>
</div>
Each time the store is opened from the link, the first tab is active and the content of the first product category is displayed. My goal is to rework the code so that I can activate each category (tab) with a direct link. I want to use the direct link to this category to activate the tab for the respective category and show the products. At the moment I have to click on the tab to get this effect, otherwise the first tab is always active.
I ask for your help.
Тhanks.

Multiple generated popups / forms returning unique download links

I've got a page which has a Bootstrap tabsection. Every tab contains a machine (custom post type), which has a unique PDF download link attached to it by an ACF field. When pressed on the button, a modal opens with a form which has ID 1350. When the form has been filled in and sent has been hit, the relevant PDF file is automatically downloaded in a new tab.
The problem here is that when there's multiple machines, both the PDF files start downloaden. When the button on the second machine is pressed, the first machine pdf gets downloaded, then the second one.
I've tried outputting event.detail.containrePostId but it only returns the post id of the first machine in the query, twice. What i can't seem to achieve is that when a button is pressed on the form, only that relevant pdf gets downloaded. Below is the flexible content part that handles the tabsection.
<?php elseif( get_row_layout() == 'tabsectie'): ?>
<div class="section wow padding-0 margt-0 margb-0 animated">
<div class="tabsection-slider-wrapper">
<div class="pseudo-bg pseudo-right pseudo-lightblue"></div>
<?php if( have_rows('tabs_repeater') ): $i = 1; // Set the increment variable ?>
<div class="container">
<div class="row justify-content-center tabsection-row">
<div class="col-xl-8">
<div class="tab-wrapper">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<?php while ( have_rows('tabs_repeater') ) : the_row(); ?>
<?php $machines = get_sub_field('machine'); ?>
<?php if( $machines ): ?>
<?php foreach( $machines as $post ): ?>
<?php setup_postdata($post); ?>
<li class="nav-item<?php if($i == 1) echo ' active';?>">
<a class="nav-link<?php if($i == 1) echo ' active';?>" id="<?php echo sanitize_title_with_dashes(get_the_title(get_the_ID())); ?>-tab" data-toggle="tab" href="#<?php echo sanitize_title_with_dashes(get_the_title(get_the_ID())); ?>" role="tab" aria-controls="<?php echo sanitize_title_with_dashes(get_the_title(get_the_ID())); ?>" aria-selected="true"><?php echo the_title(); ?></a>
</li>
<?php endforeach; ?>
<?php wp_reset_postdata(); ?>
<?php endif; ?>
<?php $i++; /* Increment the increment variable */ endwhile; //End the loop ?>
</ul>
</div>
</div>
</div>
</div>
<div class="tab-content" id="myTabContent">
<?php $i = 1; /* Set the increment variablew */ while ( have_rows('tabs_repeater') ) : the_row(); ?>
<?php $machines = get_sub_field('machine'); ?>
<?php if( $machines ): ?>
<?php foreach( $machines as $post ): ?>
<?php setup_postdata($post); ?>
<?php
$pdf_machine = get_field('pdf_machine');
?>
<div class="tab-pane fade show <?php if($i == 1) echo 'active';?>" id="<?php echo sanitize_title_with_dashes(get_the_title(get_the_ID())); ?>" role="tabpanel" aria-labelledby="<?php echo sanitize_title_with_dashes(get_the_title(get_the_ID())); ?>-tab">
<div class="image-slider-content-wrapper">
<div class="container">
<div class="row">
<div class="col-lg-4 offset-lg-2 slider-content-left">
<h1 class="mb-5"><?php the_title(); ?></h1>
<span class="machine-content"><?php get_template_part('blocks/main-fields'); ?></span>
<?php $pdf_machine = get_field('pdf_machine'); ?>
<?php if(!empty($pdf_machine)): ?>
<?php var_dump($pdf_machine); ?>
<button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#downloadModalMachine-<?php echo $i; ?>">Download brochure</button>
<?php
/*pdf_download(get_the_ID());*/
// Modal template part ONLY for the machines modal
include('includes/modal.php');
printf("
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
if ( '1350' == event.detail.contactFormId) {
alert( event.detail.containerPostId );
}
}, false );
</script>", $pdf_machine);
?>
<?php endif; ?>
</div>
</div>
</div>
<div class="image-slider wow animate__animated animate__fadeInRight" data-wow-offset="100">
<div class="carousel">
<?php $slider = get_sub_field('slider'); ?>
<?php if(have_rows('media')): ?>
<?php while(have_rows('media')): the_row(); ?>
<?php $slider_type = get_sub_field('media_type'); ?>
<div class="slider-item">
<?php if($slider_type == 'image'): ?>
<?php $image = get_sub_field('image'); ?>
<?php if( !empty($image) ): ?>
<img class=" lider-image" src="<?php echo $image['sizes']['gallery']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php endif; ?>
<?php elseif($slider_type == 'video'): ?>
<?php $video = get_sub_field('video'); ?>
<?php if (!empty($video) ): ?>
<div class="embed-container">
<?php echo $video; ?>
</div>
<?php endif; ?>
<?php endif; ?>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div>
<div class="slider-arrow-wrapper">
<div class="slider-nav">
<div class="nav-button nav-btn-left">
</div>
<div class="nav-button nav-btn-right">
</div>
</div>
</div>
</div>
</div>
</div>
<?php endforeach; ?>
<?php wp_reset_postdata(); ?>
<?php endif; ?>
<?php $i++; /* Increment the increment variable */ endwhile; //End the loop ?>
</div>
</div>
</div>
<?php endif; ?>
Here is the javascript that generates the download link
<?php
/*pdf_download(get_the_ID());*/
// Modal template part ONLY for the machines modal
include('includes/modal.php');
printf("
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
if ( '1350' == event.detail.contactFormId) {
window.open('%s');
}
}, false );
</script>", $pdf_machine);
?>
<?php endif; ?>

Safari gives huge white space in content?

My website looks good on every browser except Safari.
In Safari it shows a huge whitespace.
Here you can see the difference between Chrome and Safari.
This is Safari:
And this is Chrome:
<?php get_header();?>
<?php while (have_posts()): the_post();
$imgId = get_post_thumbnail_id();
$image = wp_get_attachment_image_src($imgId, 'full'); ?>
<div class="theBiggest">
<?php if ($imgId) { ?>
<div style="background-image: url(<?php echo $image[0] ?>); background-repeat: no-repeat; background-size: cover; min-height: 346px;background-position:100% 60%; " >
<div class="text-center" style="padding-top: 130px;">
<img src="<?php echo THEME_URL ?>/images/logo_icon_white.png" /><br>
<div class="title-page"><?php the_title();?></div>
</div>
</div>
<div class="page-bg" >
<?php } else { ?>
<div class="container text-center bg-white" style="padding-top:50px; margin-bottom: 20px;">
<img class="top-icon" src="<?php echo get_field('top_icon')['url'] ?>" /><br>
<?php $title = get_the_title();
$ar = explode(' ', strtoupper($title)); ?>
<span class="title-page grey-txt"><?php echo $ar[0] ?></span>
<?php if (count($ar) > 1) {?><span class="title-page orange-txt"><?php echo $ar[1] ?></span><?php }?>
</div>
<!-- TRAININGEN page or Coaching page -->
<?php if (have_rows('ups_trainingen')): ?>
<div class="greyBlock">
<?php if(is_page('Leiderschaps training')) {
echo "<p>Hierom kiest u voor een <strong>training</strong> van InReach</p> ";
$ctn = "t";
}
if (is_page('Leiderschaps coaching')) {
echo "<p>Hierom kiest u voor <strong>coaching</strong> van InReach</p> ";
$ctn = "c";
} ?>
<?php $i=1;?>
<?php while (have_rows('ups_trainingen')): the_row();
$text = get_sub_field("text");
$link_popover = get_sub_field("link/popover");
?>
<button type="button" class="orangeBtn btn " id="<?php echo $ctn . $i;?>" data-trigger="hover" data-container="body" data-toggle="popover" data-placement="bottom" data-content="<?php echo $link_popover ?>"><?php echo $text; ?></button>
<?php $i++; ?>
<?php endwhile;?>
</div>
<?php endif;
} // else $imgId
while (have_rows('sections')) { the_row();?>
<div class="container page-section">
<div class="content" >
<?php the_sub_field('content')?>
</div>
</div>
<?php
}
// OVER page
if ($post->ID == 221) { ?>
<div style="display:none">
<div id="formpopup" class="registen_form" style="padding: 30px">
<!-- <h2 style="padding-top:25px"><?php echo _e('Alles uit uw medewerkers halen?', 'new_inreach') ?></h2> -->
<h2 style="padding-top:25px"><?php echo _e('Abonneer op deze gratis leiderschapstips', 'new_inreach') ?></h2>
<!-- <h2><?php echo _e('Ontdek gratis de 3 grootste missers die u niet moet maken.', 'new_inreach') ?></h2> -->
<?php gravity_form(7, false, false, false, '', true);?>
<!-- <h4><?php echo _e('En ontvang regelmatig gratis tips om uw leiderschap te versterken', 'new_inreach') ?></h4> -->
<h4></h4>
</div>
</div>
<div class="container page-section text-center">
<div style="margin-bottom: 30px;">
Ontvang leiderschapstips
Bekijk trainingsmogelijkheden
Plan een coachingssessie in
</div>
</div>
<?php } ?>
<?php if (have_rows('info_buttons')): ?>
<div class="info_button" >
<p style="color:#fff;">Kies uw snelheid</p>
<?php while (have_rows('info_buttons')): the_row();
$image = get_sub_field('image');
$link = get_sub_field('link');
?>
<div><img src="<?php echo $image['url']; ?>"></div>
<?php endwhile;?>
</div>
<?php endif;?>
<?php if ($post->post_content !== "") { ?>
<div class="container text-center bg-white test"><?php the_content();?></div>
<?php } ?>
</div><!-- page-bg -->
<?php if (have_rows('orange_&_grey_buttons')): ?>
<?php while (have_rows('orange_&_grey_buttons')): the_row();
$orangeBtnText = get_sub_field('orange_btn_text');
$orangeBtnlink = get_sub_field('orange_btn_link');
$greyBtnText = get_sub_field('grey_btn_text');
$greyBtnlink = get_sub_field('grey_btn_link');
?>
<?php
$footerText = get_field('footer_text');
if ($footerText) { ?>
<div class="page-footer" style="background-color: <?php the_field('footer_color');?>">
<div class="container"><?php echo $footerText ?></div>
</div>
<?php } ?>
<div class="orange-grey-btns" style="background-color:<?php the_field('footer_color');?>;padding:15px 0;">
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6 ">
<div class="col-md-12 orange-btn">
<?php echo $orangeBtnText; ?>
</div>
</div>
<div class="col-md-8 col-sm-6">
<div class="col-md-12 grey-btn">
<i><?php echo $greyBtnText; ?></i>
</div>
</div>
</div>
</div>
</div>
<?php endwhile;endif; //orange_&_grey_buttons?>
</div>
<?php endwhile; //have_posts?>
<?php get_footer();?>

Showwordpress user description when user image is clicked

I am working on an existing wordpress site. I am updating a page that displays the users in clickable images. When the image is clicked a dropdown box is supposed to display the users name and description. The problem I am having is, the dropdown box is only displaying the name and description of the last user on the page. The information in the dropdown is not matching up with the image clicked. Any help is greatly appreciated!
Here is the HTML/PHP:
<section class="series">
<div class="container-fluid">
<?php //query for hosts/contributor users
$cq = new WP_User_Query(array('role'=>'contributor'));
// User Loop
if(!empty($cq->results))
{
//sort users into current and past by meta field//
$hosts = $cq->results;
$current_hosts = array();
foreach($hosts as $user)
{
$user->sort_num = get_field('order', "user_$user->ID");
if(tv_is_host_active($user->ID))
$current_hosts[] = $user;
else
$past_hosts[] = $user;
}
usort($current_hosts, 'tv_compare_hosts');
//display the current hosts
$row_counter = 0;
foreach ( $current_hosts as $user )
{
//add rows of four
if($row_counter++ % 4 == 0)
{
echo "<div class='row'\n>";
} ?>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<a class="card card-cast" href="javascript:void(0)">
<div class="card-img-cast">
<?php if(get_field('profile_picture', "user_".$user->ID)): $image = get_field('profile_picture', "user_".$user->ID); ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php else: ?>
<img src="<?php bloginfo('stylesheet_directory'); ?>/img/thumbholder-medium.png" alt="winchester logo" />
<?php endif;?>
</div>
<div class="card-content">
<div class="card-title"><?php echo $user->data->display_name; ?></div>
</div>
</a>
</div>
<?php
//add rows of 4
if($row_counter % 4 == 0)
{
echo "</div><!-- end row-->\n";
}
} //end foreach of current hosts
//cap row if the last row was not full
if(!($row_counter % 4 == 0))
{
echo "</div><!-- end/cap row-->\n";
}
?>
<?php
} else { ?>
<div class="col-xs-12 col-sm-4 host">
<p>No hosts found.</p>
</div>
<div class="clearfix visible-xs"> </div>
<?php
}
?>
<?php endwhile;
endif; //end main loop ?>
<!-- cast profile dropdown -->
<div class="container-fluid profile-details hidden">
<i class="fa fa-times closeBox" aria-hidden="true"></i>
<h3 class="member-name"><?php echo $user->data->display_name; ?></h3>
<p class=".text-white"><?php echo tv_host_shows($user->ID); ?></p>
<p class="member-description"><?php echo get_user_meta($user->ID, 'description', true); ?></p>
<div class="row">
<div class="col-xs-12">
<ul class="list-inline social">
<?php if(get_field('facebook_profile_link', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="Like <?php echo $user->data->display_name; ?> On Facebook" href="<?php the_field('facebook_profile_link', "user_".$user->ID); ?>"><i class="fa fa-facebook"></i></a></li>
<?php endif;
if(get_field('twitter_profile_link', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="Follow <?php echo $user->data->display_name; ?> On Twitter" href="<?php the_field('twitter_profile_link', "user_".$user->ID); ?>"><i class="fa fa-twitter"></i></a></li>
<?php endif;
if(get_field('youtube_channel_link', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="Watch <?php echo $user->data->display_name; ?> On Youtube" href="<?php the_field('youtube_channel_link', "user_".$user->ID); ?>"><i class="fa fa-youtube"></i></a></li>
<?php endif;
if(get_field('website', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="See the website of <?php echo $user->data->display_name; ?>" href="<?php the_field('website', "user_".$user->ID); ?>"><i class="fa fa-globe"></i></a></li>
<?php endif; ?>
</ul>
</div>
</div><!-- end social link row -->
</div><!-- end dropdown -->
</div><!--end container-->
</section>
</main><!--end .main-bg -->
<script>
jQuery(document).ready(function() {
initHostsPage();
});
</script>
<?php
get_footer(); ?>
and the jquery function to show dropdown box:
function initHostsPage() {
$('.social').each(function(key, val){
$(this).children('li').children('a').tooltip();
});
//dropdown profile box
$('.card').click(function() {
var row = $(this).closest('.row');
var profileDetails = $('.profile-details');
profileDetails.removeClass('hidden');
row.append(profileDetails);
if((profileDetails).is(':hidden')) {
profileDetails.slideTogle('slow');
}
else{
profileDetails.hide();
}
});
$(".closeBox").click(function() {
$(this).parent().hide();
});
}

Ok apparently there were both php and javascript mistakes. In php you succesfully RETRIEVING all users, but only PRINTING the last one, you would need to cast the profile-details inside the loop, but you also need to differentiate each profile-detail so they dont all come out at the same time. And we need to differentiate cards. So to not broke any css I added profile-id class and data-id for the card
<section class="series">
<div class="container-fluid">
<?php //query for hosts/contributor users
$cq = new WP_User_Query(array('role'=>'contributor'));
// User Loop
if(!empty($cq->results))
{
//sort users into current and past by meta field//
$hosts = $cq->results;
$current_hosts = array();
foreach($hosts as $user)
{
$user->sort_num = get_field('order', "user_$user->ID");
if(tv_is_host_active($user->ID))
$current_hosts[] = $user;
else
$past_hosts[] = $user;
}
usort($current_hosts, 'tv_compare_hosts');
//display the current hosts
$row_counter = 0;
foreach ( $current_hosts as $user )
{
//add rows of four
if($row_counter++ % 4 == 0)
{
echo "<div class='row'\n>";
} ?>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<a data-id="<?php echo $user->ID;?>" class="card card-cast" href="javascript:void(0)">
<div class="card-img-cast">
<?php if(get_field('profile_picture', "user_".$user->ID)): $image = get_field('profile_picture', "user_".$user->ID); ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php else: ?>
<img src="<?php bloginfo('stylesheet_directory'); ?>/img/thumbholder-medium.png" alt="winchester logo" />
<?php endif;?>
</div>
<div class="card-content">
<div class="card-title"><?php echo $user->data->display_name; ?></div>
</div>
</a>
</div>
<?php
//add rows of 4
if($row_counter % 4 == 0)
{
echo "</div><!-- end row-->\n";
}
} //end foreach of current hosts
//cap row if the last row was not full
if(!($row_counter % 4 == 0))
{
echo "</div><!-- end/cap row-->\n";
}
?>
<!-- cast profile dropdown -->
<div class="container-fluid profile-details profile-<?php echo $user->ID;?>hidden">
<i class="fa fa-times closeBox" aria-hidden="true"></i>
<h3 class="member-name"><?php echo $user->data->display_name; ?></h3>
<p class=".text-white"><?php echo tv_host_shows($user->ID); ?></p>
<p class="member-description"><?php echo get_user_meta($user->ID, 'description', true); ?></p>
<div class="row">
<div class="col-xs-12">
<ul class="list-inline social">
<?php if(get_field('facebook_profile_link', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="Like <?php echo $user->data->display_name; ?> On Facebook" href="<?php the_field('facebook_profile_link', "user_".$user->ID); ?>"><i class="fa fa-facebook"></i></a></li>
<?php endif;
if(get_field('twitter_profile_link', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="Follow <?php echo $user->data->display_name; ?> On Twitter" href="<?php the_field('twitter_profile_link', "user_".$user->ID); ?>"><i class="fa fa-twitter"></i></a></li>
<?php endif;
if(get_field('youtube_channel_link', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="Watch <?php echo $user->data->display_name; ?> On Youtube" href="<?php the_field('youtube_channel_link', "user_".$user->ID); ?>"><i class="fa fa-youtube"></i></a></li>
<?php endif;
if(get_field('website', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="See the website of <?php echo $user->data->display_name; ?>" href="<?php the_field('website', "user_".$user->ID); ?>"><i class="fa fa-globe"></i></a></li>
<?php endif; ?>
</ul>
</div>
</div><!-- end social link row -->
</div><!-- end dropdown -->
</div><!--end container-->
<?php
} else { ?>
<div class="col-xs-12 col-sm-4 host">
<p>No hosts found.</p>
</div>
<div class="clearfix visible-xs"> </div>
<?php
}
?>
<?php endwhile;
endif; //end main loop ?>
</section>
</main><!--end .main-bg -->
<script>
jQuery(document).ready(function() {
initHostsPage();
});
</script>
<?php
get_footer(); ?>
Html set now lets see the javascript. It was selecting any card and retrieving the only profile. Now it will select any card, get its id and retrieve that id profile:
function initHostsPage() {
$('.social').each(function(key, val){
$(this).children('li').children('a').tooltip();
});
//dropdown profile box
$('.card').click(function() {
var row = $(this).closest('.row');
var id = $(this).data('id'); //We get the card
var profileDetails = $('.profile-' + id); //We get the exact profile
profileDetails.removeClass('hidden');
row.append(profileDetails);
if((profileDetails).is(':hidden')) {
profileDetails.slideTogle('slow');
}
else{
profileDetails.hide();
}
});
$(".closeBox").click(function() {
$(this).parent().hide();
});
}
Tell me how it goes!

HTML/PHP:
<section class="series">
<div class="container-fluid">
<?php //query for hosts/contributor users
$cq = new WP_User_Query(array('role'=>'contributor'));
// User Loop
if(!empty($cq->results))
{
//sort users into current and past by meta field//
$hosts = $cq->results;
$current_hosts = array();
foreach($hosts as $user)
{
$user->sort_num = get_field('order', "user_$user->ID");
if(tv_is_host_active($user->ID))
$current_hosts[] = $user;
else
$past_hosts[] = $user;
}
usort($current_hosts, 'tv_compare_hosts');
//display the current hosts
$row_counter = 0;
foreach ( $current_hosts as $user )
{
//add rows of four
if($row_counter++ % 4 == 0)
{
echo "<div class='row'\n>";
} ?>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<a data-id="<?php echo $user->ID;?>" class="card-cast" href="javascript:void(0)">
<div class="card-img-cast">
<?php if(get_field('profile_picture', "user_".$user->ID)): $image = get_field('profile_picture', "user_".$user->ID); ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php else: ?>
<img src="<?php bloginfo('stylesheet_directory'); ?>/img/thumbholder-medium.png" alt="winchester logo" />
<?php endif;?>
</div>
<div class="card-content">
<div class="card-title"><?php echo $user->data->display_name; ?></div>
</div>
</a>
</div>
<!-- cast profile dropdown -->
<div class="profile-details profile-<?php echo $user->ID;?> hidden">
<i class="fa fa-times closeBox" aria-hidden="true"></i>
<h3 class="member-name"><?php echo $user->data->display_name; ?></h3>
<p class=".text-white"><?php echo tv_host_shows($user->ID); ?></p>
<p class="member-description"><?php echo get_user_meta($user->ID, 'description', true); ?></p>
<div class="row">
<div class="col-xs-12">
<ul class="list-inline social">
<?php if(get_field('facebook_profile_link', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="Like <?php echo $user->data->display_name; ?> On Facebook" href="<?php the_field('facebook_profile_link', "user_".$user->ID); ?>"><i class="fa fa-facebook"></i></a></li>
<?php endif;
if(get_field('twitter_profile_link', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="Follow <?php echo $user->data->display_name; ?> On Twitter" href="<?php the_field('twitter_profile_link', "user_".$user->ID); ?>"><i class="fa fa-twitter"></i></a></li>
<?php endif;
if(get_field('youtube_channel_link', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="Watch <?php echo $user->data->display_name; ?> On Youtube" href="<?php the_field('youtube_channel_link', "user_".$user->ID); ?>"><i class="fa fa-youtube"></i></a></li>
<?php endif;
if(get_field('website', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="See the website of <?php echo $user->data->display_name; ?>" href="<?php the_field('website', "user_".$user->ID); ?>"><i class="fa fa-globe"></i></a></li>
<?php endif; ?>
</ul>
</div>
</div><!-- end social link row -->
</div><!-- end dropdown -->
<?php
//add rows of 4
if($row_counter % 4 == 0)
{
echo "</div><!-- end row-->\n";
}
} //end foreach of current hosts?>
</div><!-- end Container -->
<?php
} else { ?>
<div class="col-xs-12 col-sm-4 host">
<p>No hosts found.</p>
</div>
<div class="clearfix visible-xs"> </div>
<?php
}
?>
<?php endwhile;
endif; //end main loop ?>
</section>
</main><!--end .main-bg -->
<script>
jQuery(document).ready(function() {
initHostsPage();
});
</script>
<?php
get_footer(); ?>
and the Javascript:
function initHostsPage() {
$('.social').each(function(key, val){
$(this).children('li').children('a').tooltip();
});
//dropdown profile box
$('.card-cast').click(function() {
var row = $(this).closest('.row');
var id = $(this).data('id'); //get the card
var profileDetails = $('.profile-' + id); //get the exact profile
profileDetails.removeClass('hidden');
row.append(profileDetails);
if((profileDetails).is(':hidden')) {
profileDetails.slideToggle('slow');
}
else{
profileDetails.hide();
}
});
$(".closeBox").click(function() {
$(this).parent().hide();
});
}

How to hide DIV using class when field is Empty?

I have a PHP While statement on my page. I would like to hide DIV with the class name "coupon" for each record that has empty field $rows['deal'];. This is what my code currently looks like. How can I alter to accomplish this. Thank You much!!!
<?php while ($rows = mysql_fetch_array($query)) { ?> <!-- QUERY FOR PAGE 1 RECORDS -->
<div id="main">
<div id="client_name"><?php echo $rows['client_name']; ?></div>
<div id="phone"><?php echo $rows['phone']; ?></div>
<div id="client_square"></div>
<div id="client_rectangle"></div>
<img id="client_img" src="<?php echo $rows['client_img']; ?>">
<a id="edit" href="update_edit.php?id=<?php echo $rows['id']; ?>"><img id="edit_img" src="images/edit_record.png"></a>
<span class="coupon" id="cash_img"></span><span class="coupon" id="deal_text"><?php echo $rows['deal']; ?></span>
</div>
<?php } ?>

You can do this on this way:
<?php if($rows['deal']){ ?>
<span class="coupon" id="cash_img"></span><span class="coupon" id="deal_text"><?php echo $rows['deal']; ?></span>
<?php } ?>
Full code
<?php while ($rows = mysql_fetch_array($query)) { ?> <!-- QUERY FOR PAGE 1 RECORDS -->
<div id="main">
<div id="client_name"><?php echo $rows['client_name']; ?></div>
<div id="phone"><?php echo $rows['phone']; ?></div>
<div id="client_square"></div>
<div id="client_rectangle"></div>
<img id="client_img" src="<?php echo $rows['client_img']; ?>">
<a id="edit" href="update_edit.php?id=<?php echo $rows['id']; ?>"><img id="edit_img" src="images/edit_record.png"></a>
<?php if($rows['deal']){ ?>
<span class="coupon" id="cash_img"></span><span class="coupon" id="deal_text"><?php echo $rows['deal']; ?></span>
<?php } ?>
</div>
<?php } ?>

Try below code:
<?php while ($rows = mysql_fetch_array($query)) { ?>
<!-- QUERY FOR PAGE 1 RECORDS -->
<div id="main">
<div id="client_name"><?php echo $rows['client_name']; ?></div>
<div id="phone"><?php echo $rows['phone']; ?></div>
<div id="client_square"></div>
<div id="client_rectangle"></div>
<img id="client_img" src="<?php echo $rows['client_img']; ?>">
<a id="edit" href="update_edit.php?id=<?php echo $rows['id']; ?>"><img id="edit_img" src="images/edit_record.png"></a>
<?php if($rows['deal']){ ?>
<span class="coupon" id="cash_img"></span><span class="coupon" id="deal_text"><?php echo $rows['deal']; ?></span>
<?php } ?>
</div>
<?php } ?>

You do not need javascript for this, add this line:
<?php echo ($rows['deal']==""?"style='display:none;'":"") ?>
Complete code:
<?php while ($rows = mysql_fetch_array($query)) { ?> <!-- QUERY FOR PAGE 1 RECORDS -->
<div id="main">
<div id="client_name"><?php echo $rows['client_name']; ?></div>
<div id="phone"><?php echo $rows['phone']; ?></div>
<div id="client_square"></div>
<div id="client_rectangle"></div>
<img id="client_img" src="<?php echo $rows['client_img']; ?>">
<a id="edit" href="update_edit.php?id=<?php echo $rows['id']; ?>"><img id="edit_img" src="images/edit_record.png"></a>
<span class="coupon" <?php echo ($rows['deal']==""?"style='display:none;'":"") ?> id="cash_img"></span><span class="coupon" id="deal_text"><?php echo $rows['deal']; ?></span>
</div>
<?php } ?>

with PHP:
You can just count if row has a data so echo it:
this is row with data:
<?php
$row = 'you can add get rows from database';
if (count($row)) {
?>
<div style="color: red">
<?php echo $row; // here you can add your row (foreach) ?>
</div>
<?php } ?>
this is row with out data
<?php
$row = '';
if (count($row)) {
?>
<div style="color: red">
<?php echo $row; // here you can add your row (foreach) ?>
</div>
<?php } ?>

If the field is empty, it will have a length of 0. So you can use that logic in order to hide the 'coupon' class
<?php while ($rows = mysql_fetch_array($query)) { ?> <!-- QUERY FOR PAGE 1 RECORDS -->
<div id="main">
<div id="client_name"><?php echo $rows['client_name']; ?></div>
<div id="phone"><?php echo $rows['phone']; ?></div>
<div id="client_square"></div>
<div id="client_rectangle"></div>
<img id="client_img" src="<?php echo $rows['client_img']; ?>">
<a id="edit" href="update_edit.php?id=<?php echo $rows['id']; ?>"><img id="edit_img" src="images/edit_record.png"></a>
<!-- My code -->
<?php
if(strlen($rows['deal'] > 0)
{
?>
<span class="coupon" id="cash_img"></span><span class="coupon" id="deal_text"><?php echo $rows['deal']; ?></span>
<?php
}
?>
<!-- End of my code -->
</div>
<?php } ?>

We can use something like this .
<?php if($fildvalue != ''){ ?>
<div><?php echo $fildvalue; ?> </div>
<?php } ?>
so div will be created only when their is an value

Check the data row and put all the HTML tags which you want to hide in case if it is empty or not set.
<?php if(isset($rows['deal']) && !empty($rows['deal'])){ ?>
<span class="coupon" id="deal_text"><?php echo $rows['deal']; ?></span>
<?php } ?>
In PHP, empty() function is able to check NULL value, empty string and zero in return.