How do you create links to content hidden by show/hide javascript?

'Ola, all.

First time poster here. I may not ask my question in the most accurate way, so please be patient with this newbie.

I would like to create links to content that is hidden by a show/hide java script. There are three divs within each hidden content with videos and text to which I would like create links; e.g., create a link to the "example" div shown in the code below. It doesn't have to be linked directly to each div. Creating a link destination above the div would be even better. I hope my question makes sense.

The code I am using for the show/hide works perfectly. This is a generic version of that code:

HTML

<p>***Visible content*** <a href="#" id="example-show" class="showLink" onclick="showHide('example');return false;">See more.</a> </p> <div id="example" class="more"> <p>***Hidden content***</p> <p><a href="#" id="example-hide" class="hideLink" onclick="showHide('example');return false;">Hide this content.</a></p>

EXTERNAL CSS

.more {
display: none;
border-top: 1px solid #666;
border-bottom: 1px solid #666; 
}
a.showLink, a.hideLink 
{
text-decoration: none;
color: #36f;
padding-left: 8px;
background: transparent url('down.gif') no-repeat left; 
}
a.hideLink {
background: transparent url('up.gif') no-repeat left; 
}
a.showLink:hover, a.hideLink:hover {
border-bottom: 1px dotted #36f; 
}

JAVASCRIPT

function showHide(shID) {
    if (document.getElementById(shID)) {
            if (document.getElementById(shID+'-show').style.display != 'none') {
                    document.getElementById(shID+'-show').style.display = 'none';
                    document.getElementById(shID).style.display = 'block';
            }
            else {
                    document.getElementById(shID+'-show').style.display = 'inline';
                    document.getElementById(shID).style.display = 'none';
                }
        }
}

Thanks!