Question: I currently have a webpage that looks like this:

[![enter image description here](https://i.stack.imgur.com/PW7hY.png)](https://i.stack.imgur.com/PW7hY.png)

I would like to make it so the "Click to view Gallery of This property" button does not show on the initial load, but does show once the property links are clicked.

Here is an example of my current code:

```
    function changeImage(image, link) {
    document.getElementById('imageReplace').src = image;
    document.getElementById('linkReplace').href = link;
}

```

HTML:

```
<a href="#/" onclick="changeImage('IMAGE', 'LINK');  return false">TEXT</a>
<a href="#/" onclick="changeImage('IMAGE', 'LINK');  return false">TEXT</a>
<a href="#/" onclick="changeImage('IMAGE', 'LINK');  return false">TEXT</a>

<img src="INITALPAGELOADIMAGE" alt="Images" id="imageReplace" class="changeImageClass">

<a href="#" id="linkReplace"><span style="float: right; padding:2px;"><Button>Click to view Gallery of This Property</button></span></a>

```

From what I understand I will want to use to use this function to hide the element:

```
document.getElementById('element').style.display = 'none';

```

But I am unsure how to work this into my current code. Do I add this with my current function, or is this a separate function all together?

If someone could point me into the right direction of how to code this properly I would really appreciate it.

Thank you so much,
-Kasandra

Answer: 
I think this is one of those exceptional cases where you want to use inline style to hide your element. This is because it takes a few seconds for the JavaScript to load. So some users may end up seeing the element when they first get on the page, then see it quickly disappear.

```
<img src="INITALPAGELOADIMAGE" alt="Images" id="imageReplace" class="changeImageClass" style="display: none;">
<a href="#" id="linkReplace" style="display: none"><span style="float: right; padding:2px;"><Button>Click to view Gallery of This Property</button></span></a>

```

Add an `onclick` attribute to your property links, 

```
<a href="#" onclick="changeImage('IMAGE', 'LINK'); return false;">TEXT</a>

```

And use the following function to show the elements

```
function changeImage (src, href) {
    // get a reference to the DOM elements
    var img = document.getElementById('imageReplace'),
        link = document.getElementById('linkReplace');
    // update the elements
    img.src = src;
    link.href = href;
    // show the elements
    img.style.display = '';
    link.style.display = '';
}

```

Here's a quick [demo (updated)](https://jsbin.com/xaluqufina/1/edit?html,js,output).
Using css, you can have the block have `display: none;` and then when you use show it will change the display to default (usually `display: block;`)