[Resolved] Conditional Display in front-end when option selected

[Author]

Posts

[FelipeP5703]

Tell us what you are trying to do?
I created a custom type field named Promotions (Promoções) with a radio for Yes or No (Sim or Não). If chosen Yes, then it would display custom type multiple lines named Promotion (Promoção), where the user can include their promotions.

The show/hide condition was implemented in the custom type field group for Promotion and it works great on the back-end. But in the front-end, I'm using Elementor dynamic link to show the Toolset Promotions, but it should not show when the user switches from Yes to No.

Attached are the images to show what I meant. How do I hide that section when the user decides to choose No for the promotions option?

[Shane Supporter Languages: English (English ) Timezone: America/Jamaica (GMT-05:00)]

Hi Felipe,

What you need to do is to wrap this section on your template in a conditional code to check if No is actually selected on the post.
It wont be done automatic on the frontend like with the backend.

Similar to here.
https://toolset.com/forums/topic/conditional-output-is-not-showing-correctly/#post-1210267

Thanks,
Shane

[FelipeP5703]

But Shane, I'm pulling that info from Elementor's dynamic link (see pic). How would I wrap a condition around that?

[FelipeP5703]

Shane,

I was able to create a shortcode in the function.php file where it hides if the promotion section is selected no with the following code:

function func_show_promocao( $atts ) {
 global $post;
  
$promocoes = get_post_meta($post->ID,'wpcf-promocoes',true);
$promocao = get_post_meta($post->ID,'wpcf-promocao',true);
	
  if($promocoes == 1){
$linkpromocao = $promocao;
return $linkpromocao;
  }
}
add_shortcode('show_promocao','func_show_promocao');

So that is done. The only thing is that it creates an unnecessary space. I believe it's because of the div. I tried using CSS to hide the div, but it only hides and not remove it.

div:empty {
   display: none;
}

Is there a function in php where I can delete the div so there isn't any space showing?

[Shane Supporter Languages: English (English ) Timezone: America/Jamaica (GMT-05:00)]

Hi Felipe,

Your solution would work well, however for the div to be completely removed without the space you will need to hide it using a specific class name.

Is it possible to add a custom classname to this editor section ? I see in the screenshot there is a Style and an Advanced tab.

There might be a way to add your custom class there.

Then you should be able to do this.

.customclass{
display: none;
}

Please let me know if this helps.

Thanks,
Shane

[FelipeP5703]

I contacted Elementor and they do not have a way to hide empty fields yet. So I'll have to find a custom javascript or function to do it.

But after Elementor's upgrade, it's now having conflicts with Toolset Views, Forms, and Type plugins. I contacted them and gave them my credentials to check out the site. I cannot do anything right now, I need to wait for them to fix it.

I'll keep you posted!

[Shane Supporter Languages: English (English ) Timezone: America/Jamaica (GMT-05:00)]

Hi Felipe,

Thanks for the update.

Let me know when you have any further info on this.

Thanks,
Shane

[FelipeP5703]

So they have fixed the issue with the plugins. But I still can't get the white space out.

I tried the following codes with no success. Note: I added an html widget on Elementor's single post to add the script to the page.

<script>
$('div.elementor-widget-shortcode:empty').hide();
</script>

<script>
$(document).ready(function() {
   str = $('div.elementor-widget-shortcode').text();
   if($.trim(str) === "") {
     $('div.elementor-widget-shortcode').remove();
   }
});
</script>

<script>
 $('.elementor-widget-shortcode').each(function() {
        var itembubble = $(this);
        if (itembubble.html() == '') {
            itembubble.addClass('hidden');        
        }
    });
    </script>

<script>
    $(document).ready(function() { $('div:empty').remove(); });
</script>

I'm not sure why any of these aren't working. I'm not a coder so I don't know how to do this. Any help would be appreciated!

[Shane Supporter Languages: English (English ) Timezone: America/Jamaica (GMT-05:00)]

Hi Felipe,

Could you send me a link to the page where the white space is ?

Thanks,
Shane

[FelipeP5703]

Here is one of them: hidden link

[Shane Supporter Languages: English (English ) Timezone: America/Jamaica (GMT-05:00)]

Hi Felipe,

The spacing seems fine to me. Is there one that you have that has the promotion section active?

I need something to compare it to . See Screenshot

Thanks,
Shane

[FelipeP5703]

This page has all the custom fields filled in - hidden link
While this page, I purposely did not fill in the phone numbers so I can see how it looked if someone does not fill the custom field - hidden link

Unnecessary empty space - hidden link

[FelipeP5703]

My issue is resolved now. Thank you!