display a div using javascript and onclick

I've read lots of posts on this but I'm still struggling. I'm trying to show and hide a div class using some simple java. I can get it to work in JSFiddle but not on my live site.

Here's the code I'm using. HTML first

<div id="mydiv1">
    <div id="mydiv-container">
        <div id="mydiv-content">
            <h1>Here's The Popup 1</h1>
            <br>Click the link to close.
            <br>
            <a href="#" onclick="show('mydiv2')">Open 2</a>
        </div>
    </div>
</div>

<div id="mydiv2"  style="display:none">
    <div id="mydiv-container">
        <div id="mydiv-content">
            <h1>Here's The Popup 2</h1>
            <br>Click the link to close.
            <br>
            <a href="#" onclick="hide('mydiv2')">Close 2</a>
        </div>
    </div>
</div>

JavaScript:

function show(target) {
document.getElementById(target).style.display = 'block';
}

function hide(target) {
document.getElementById(target).style.display = 'none';
}

Can't workout why it wont switch divs on live server.