Clash Royale CLAN TAG#URR8PPP

Hide a div when the child div does not exist

When the function runs It is pulling the title "Founders" every time. I want it to function, when <?php if (get_field('choose_a_level')=='Founders'){ ?> doesn't return any posts then the main title in the h3 tag won't show.

<?php if (get_field('choose_a_level')=='Founders'){ ?>

I used the founder class to target the post. I have tried

$('.team-header').not($('.founder').parent().parent()).hide();


I have been on this for hours, trial and error and would really appreciate some help.

Thank you, Al

function alec_cc_render_team_members_founders()
$args = array(
'numberposts' => -1,
'post_type' => 'team_members'
);

$team_members = new WP_Query($args);
$count = 0;
if( $team_members->have_posts() ): ?>

<div class="clear"></div>
<h3 class="team-header">Founders</h2>

<div class="gdlr-personnel-item-wrapper team-grid">
<div class="clear"></div>
<?php


while( $team_members->have_posts() ) :
$team_members->the_post();
$count++;
?>
<?php if (get_field('choose_a_level')=='Founders') ?>
<div class="four columns" onresize="founderResize()">
<div class="gdlr-item founder gdlr-personnel-item plain-style gdlr-left">
<div class="gdlr-ux gdlr-personnel-ux">
</div>
</div>
<?php
if ($count == 4)
$count = 0;
?>
<div class="clear"></div>
<?php

?>
</div>
<?php ?>

<?php endwhile;
endif;
?>
</div>
<script type="text/javascript">
function founderResize()
var maxHeight = 0;

var elements = document.getElementsByClassName('founder');

var elementHeights = Array.prototype.map.call(elements, function(el)
return el.clientHeight;
);

var maxHeight = Math.max.apply(null, elementHeights);

// surround this in a function

Array.prototype.forEach.call(elements, function(el)
el.style.height = maxHeight + "px"
);

// Call the function a half second after the page loads
// Call the function when the window resizes




</script>
<?php


add_shortcode('team_members_founders', 'alec_cc_render_team_members_founders');


if( $team_members->have_posts() ):

<h3>

</h2>

.founder

.team-header

1 Answer
1

<div class="gdlr-item founder gdlr-personnel-item plain-style gdlr-left"> are not children of <h3 class="team-header">, so the test you want to do will not work.

<div class="gdlr-item founder gdlr-personnel-item plain-style gdlr-left">

<h3 class="team-header">

Rather than fix this in Javascript, you can output the header conditionally in PHP. Do it in the loop, before the first time you output a founder.

$first_founder = true;
while( $team_members->have_posts() ) :
$team_members->the_post();
$count++;
?>
<?php if (get_field('choose_a_level')=='Founders'){ ?>
if ($first_founder)
$first_founder = false; ?>
<div class="clear"></div>
<h3 class="team-header">Founders</h3>

<div class="gdlr-personnel-item-wrapper team-grid">
<div class="clear"></div>
<?php
<div class="four columns" onresize="founderResize()">
<div class="gdlr-item founder gdlr-personnel-item plain-style gdlr-left">
<div class="gdlr-ux gdlr-personnel-ux">
</div>
</div>
<?php
if ($count == 4)
$count = 0;
?>
<div class="clear"></div>
<?php

if (!$first_founder) ?>
</div>
<?php
?>


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.