0

Even thought my variables are set in a way that should set the visibility to hidden (pulling the variables from firebase), they remain visible.

My code no go.

See Firebase Variable Values

<html>
<div>
    <p>Follow us on social.</p>
    <a id="facebook" title="Facebook" href="https://www.facebook.com/LabateGroup/" target="_blank">
        <img class="socialIcon" src="Social%20Media%20Icons/Facebook.png" alt="">
    </a>
    <a id="instagram" title="Instagram" href="https://www.instagram.com/labategroup/" target="_blank">
        <img class="socialIcon" src="Social%20Media%20Icons/Instagram.png" alt="">
    </a>
    <a id="linkedin" title="LinkedIn" href="https://www.linkedin.com/company/labate-group/" target="_blank">
        <img class="socialIcon" src="Social%20Media%20Icons/LinkedIn.png" alt="">
    </a>
</div>
</html>

<style>
a {
    visibility: visible;
}

a:hover {
    color: var(--primaryColor);
    transition: all .1s ease-in-out;
    transform: scale(1.1);
    visibility: visible;
}
</style>

<script>
let facebook = brand.socialMedia.facebook.url;
let instagram = brand.socialMedia.instagram.url;
let linkedin = brand.socialMedia.linkedin.url;

function showSocialIfExists(facebook, instagram, linkedin, twitter, tiktok, youtube) {
    if(facebook !== 'tomato.com') {
        document.getElementById("facebook").style.visibility = "hidden";
    } else { document.getElementById("facebook").style.visibility = "visible"; }

    if(typeof instagram === 'undefined') {
        document.getElementById("instagram").style.visibility="hidden";
    } else { document.getElementById("instagram").style.visibility="visible"; }

    if(typeof twitter === 'undefined') {
        document.getElementById("linkedin").style.visibility="hidden";
    } else { document.getElementById("linkedin").style.visibility="visible"; }
}
</script>

enter image description here

I am not sure what else I should try.

Improve this question

1 Answer 1

Reset to default
0

Try display:none;

let facebook = brand.socialMedia.facebook.url;
let instagram = brand.socialMedia.instagram.url;
let linkedin = brand.socialMedia.linkedin.url;

function showSocialIfExists(facebook, instagram, linkedin, twitter, tiktok, youtube) {
    if(facebook !== 'tomato.com') {
        document.getElementById("facebook").style.display = "none";
    } else { document.getElementById("facebook").style.display = "block"; }

    if(typeof instagram === 'undefined') {
        document.getElementById("instagram").style.display="none";
    } else { document.getElementById("instagram").style.display="block"; }

    if(typeof twitter === 'undefined') {
        document.getElementById("linkedin").style.display="none";
    } else { document.getElementById("linkedin").style.display="block"; }
}
a {
    display: block;
}

a:hover {
    color: var(--primaryColor);
    transition: all .1s ease-in-out;
    transform: scale(1.1);
    display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!Doctype html>
<div>
    <p>Follow us on social.</p>
    <a id="facebook" title="Facebook" href="https://www.facebook.com/LabateGroup/" target="_blank">
        <img class="socialIcon" src="Social%20Media%20Icons/Facebook.png" alt="Facebook">
    </a>
    <a id="instagram" title="Instagram" href="https://www.instagram.com/labategroup/" target="_blank">
        <img class="socialIcon" src="Social%20Media%20Icons/Instagram.png" alt="instagram">
    </a>
    <a id="linkedin" title="LinkedIn" href="https://www.linkedin.com/company/labate-group/" target="_blank">
        <img class="socialIcon" src="Social%20Media%20Icons/LinkedIn.png" alt="LinkedIn">
    </a>
</div>
</html>

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.