Question

I am needing the hidden divs to be displayed ONLY when the pertaining link is clicked. I have been on a couple forums looking for an answer, but have yet asked the question myself. I am using Foundation Grid System and have very little knowledge of javascript/jquery. Thanks in advance for help that is given.

To view the markup..please follow the link: http://simplicitdesignanddevelopment.com/TENANT%20REP%20ZURB/tenant_reputations_home.html

Answer 1

Given your code, this jQuery function will work.

Demo

var links = $('.links a');
links.on('click',function(){
    var n = links.index(this);
    $('.row > div:not(.links)').eq(n).toggle();
});​

The second click on the same link will hide the paragraph. If it’s not what you want, replace toggle() with show(), or fadeIn(), or slideDown()…

You need to include jQuery at first, right? 😉

---

If you’re having trouble implementing the function above in your real layout, please replace this part of your code:

<div class="row">
<div>Content to be shown when the first link is clicked</div>
/* ...etc... */

with this one:

<div class="row" id="rowTarget">
<div>Content to be shown when the first link is clicked</div>
/* ...etc... */

and my function with this:

var links = $('.links a');
links.on('click',function(){
    var n = links.index(this);
    $('#rowTarget > div').eq(n).toggle();
});​

Another demo