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

Question

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>

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';
        }
    }
}

When you click on the link, does it open the corresponding content? — Sleek Geek, Dec 26 '14 at 04:35
`.style` doesn't return the style that comes from CSS, it only accesses inline styles. — Barmar, Dec 26 '14 at 04:39
You need to use `window.getComputedStyle()` to get the style after merging CSS in. http://stackoverflow.com/questions/5910004/how-do-i-get-a-computed-style — Barmar, Dec 26 '14 at 04:40
Thanks for the quick replies! jsfiddle[link]http://jsfiddle.net/ucfvbxbt/ The link I created does not go to the corresponding content. It goes to the part of the page where the “See more” link is located, but does not reveal the hidden content. Here's the link code I used: LINK `Go to Page videos` DESTINATION `
` — Raul, Dec 26 '14 at 05:03
Included Jquery and corrected CSS and your [fiddle](http://jsfiddle.net/ucfvbxbt/2/) works — anpsmn, Dec 26 '14 at 05:06
Apologies. "videos" in the above post are meant to read "example" in keeping with the code in my original post. — Raul, Dec 26 '14 at 05:09
@anpsmn doesnt need `jquery`, just `No wrap - in `: http://jsfiddle.net/ucfvbxbt/4/ — Raein Hashemi, Dec 26 '14 at 05:09

Sleek Geek · Answer 1 · 2014-12-26T05:17:55.393

Hoping that I understand your question. Study the example below

HTML

$(document).ready(function() {
    $('li').click(function () {
        $('.content:visible').hide(); // hides the visible content before 
        $('.content').eq($(this).index()).show(); // shows the corresponding content
    });
    });

li  {
    display: inline;
    text-transform: uppercase;
    font-family: calibri;
    height: 24px;
}

.content {
    font-size: 60px;
    color: red;
}

.content:not(:first-of-type) {
    display: none; /* Hides all but the first .content div */
}



li a {
    padding: 0 15px 0 15px;
    text-decoration: none;
    line-height: 24px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    
    <li> <a href="#">One</a></li>
    <li><a href="#">Two</a></li>
    <li><a href="#">Three</a></li>
    <li><a href="#">Four</a></li>
    
</ul>



<div class="content"> Content One</div>
    
<div class="content"> Content Two</div>

<div class="content"> Content Three</div>

<div class="content"> Content Four</div>

Note: Had to put this together to help you understand how you can achieve what you want, so you have to make necessary changes to get it to work for you.

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

1 Answers1