CODEWITHSUNDEEP
jquerycss
webmonkey237
webmonkey237

Reputation: 379

Hide a tag if mailto or tel doesn't exist

I have a database powered staff profile system, they can enter their details and it will generate a HTML page. They can enter an email address and phone number and the output HTML looks like this: 

<a href="mailto:[Email]" class="teamEmail">Email</a><br />
<a href="tel:[Phone]" class="teamPhone">[Phone]</a>

I have some CSS that will hide an empty HREF here:

a.social[href='']{ display:none; }

But what I would like to achieve is to hide the a tag if there is no content after the mailto: or tel:, the CSS above will not hide the a tag as the mailto and tel both display inside the href.

I assume this would have to be handled with jQuery which i'm OK with because one function may hide both the mailto and tel.

Thanks

Upvotes: 1

Views: 199

Answers (1)

Jesse Kernaghan
Jesse Kernaghan

Reputation: 4634

You could try the following: 

a.social[href='mailto:'],
a.social[href='tel:'] { 
     display:none; 
}

It only targets links with specifically "mailto:" or "tel:". If there is more than those specific strings then the element will not be targeted.

Upvotes: 5

Related Questions