Elementor Question posted in
A comprehensive tutorial library can be found here.

Elementor Social Icons Widget – hide if no url

I am using the Social Icons Widget within Elementor. The urls come from Advanced Custom Fields (ACF) attached the the post.

If one of the urls is empty though, I do not want the icon to show.

I have been trying use the hook ‘elementor/widget/render_content’ but not sure what do do with it once I have the element.

Tags:

2

Answers


  1. 0

    A bit late but for others that wants a solution for this. You may use Elementor’s Custom Code and insert a javascript code that will remove the empty links once the page has loaded.

        jQuery(document).ready(function(){
        jQuery('.elementor-social-icon').each(function(i,e){
            if(jQuery(this).attr('href') === undefined || 
             jQuery(this).attr('href') == ""){
                jQuery(this).parent().remove();
            }
        });
    });

    This code checks for all the social icons with a class of elementor-social-icon then removes the span container that contains the anchor tag if the href attribute is undefined or blank

    Login or Signup to reply.
  2. 0

    The JavaScript solution above is great, but I would instead opt for a custom style, since :not() is broadly supported nowadays. If you are in need of a pure CSS solution, I would use the following:

    .elementor-social-icon:not([href]) {
  display: none !important;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search