Condition code : hide div if a dynamic data is empty

How To
1

Hi,

I have a TABs bloc where I put {dynamic_data} (from ACF), and would like to hide titles of the tabs if my corresponding dynamic data are empty. Since I can’t use condition tool only for the whole bloc not only one tab, I tried to write my conditions in code with two approach but it does not work :

First simple script :

<script>
  // Check if ACF field is empty
  if ('{acf_sommaire}' === '') {
    document.getElementById('sommaire').style.display = 'none';
  }

  // Vérifier si la donnée ACF pour les auteurs est vide
  if ('{acf_auteurs}' === '') {
    document.getElementById('auteurs').style.display = 'none';
  }

  // Vérifier si la donnée ACF pour l'editorial est vide
  if ('{acf_editorial}' === '') {
    document.getElementById('editorial').style.display = 'none';
  }
</script>

Second approach :
Inspired by this similar topic, I’ve tried with a filter like this :

Hide Div if query is empty

add_filter( 'bricks/frontend/render', function( $render, $element ) {
    // Vérifiez si c'est un élément spécifique avec les ID
    if ( in_array( $element->id, ['sommaire', 'auteurs', 'editorial'] ) ) {
        
        // VĂ©rification des champs ACF
        $acf_sommaire = get_post_meta( get_the_ID(), '_sommaire', true );
        $acf_auteurs = get_post_meta( get_the_ID(), '_auteurs', true );
        $acf_editorial = get_post_meta( get_the_ID(), '_editorial', true );
        
        // Masquer les div si les données sont vides
        if ( $element->id == 'sommaire' && empty( $acf_sommaire ) ) {
            return false;
        }
        if ( $element->id == 'auteurs' && empty( $acf_auteurs ) ) {
            return false;
        }
        if ( $element->id == 'editorial' && empty( $acf_editorial ) ) {
            return false;
        }
    }
    return $render;
}, 10, 2 );

It seems very simple but I must miss something, any ideas ??
Thanks a lot,

2

if you have dynamic tag to reference it you can just use conditions

lots of options

image
image483Ă—585 12.9 KB

3

Thanks I did not know the dynamic tags, but the problem is that the condition applies to my entire tab block and not just a heading (which are embedded options of tab block). I got around this by using nested tab with which I can control separate parts.