How to show spans when another object is clicked

Question

Here is my HTML:

<div id="sidebar">

    <table id="table1">

        <tr>
            <th>Charities</th>
        </tr>

        <tr>
            <td>
                <a rel="group1" class="links">Age UK</a>
            </td>
        </tr>

        <tr>
            <td>
                <a rel="group2" class="links">Brainstrust</a>
            </td>            
        </tr>
    </table>
</div>

<div id="box">
    <img alt="" src="image1.png" id="group1" class="groups"/>
    <img alt="" src="image2.png" id="group2" class="groups"/>


<span id="group1" class="groups">1st span</span>
<span id="group2" class="groups">2nd span</span>

And my jQuery:

$( window ).load(function() {
    $(".groups").hide()
    $('a').click(function(){
        var rel = $(this).attr('rel');
        $('a').removeClass('active');
        $(this).addClass('active');
        $(".groups").hide()  
        $('#'+rel).fadeIn('slow');
    });
});

When I click on one of the td's the corresponding image shows. However, all spans are remaining hidden when the first should be visible when the first td is clicked & the same with the second. Why are the spans not becoming visible?

The .groups is working in the javascript, as nothing is visible when I open the webpage. However, when I click on one of the td's, the image shows, but not the span to go with it. I think this means that the id of the span is not working with the fadeIn part of the jQuery. What can I do to make the #+rel be the same as the span id? It looks as though they should be equal, so I don't know if I'm right in saying that it's not linking correctly - just my best guess.

Answer 1

There is nothing in your code to make the spans visible. Add an id to each span, preferably something like "txtimg1" and "txtimg2". Then in your jQuery you can reference it in a similar way to what you are doing with the image.

$('#txt'+rel).fadeIn('slow');

Answer 2

I can't see any javascript that is hiding/displaying the spans anywhere in your code.

You could alter the HTML like this:

<div id="box">
    <div id="img1">
        <img src="cant-believe-it-icon.png" alt="" />
        <span>Text with fist image</span>
    </div>
    <div id="img2">
        <img src="too-much-icon.png" alt="" />
        <span>Text with second image</span>
    </div>
</div>

Or something like this:

<a rel="group1" class="links">Age UK</a>

<div id="box">
    <img alt="" src="image1.png" id="group1" class="groups" />
    <img alt="" src="image2.png" id="group2" class="groups" />

    <span id="group1_text" class="groups">1st span</span>
    <span id="group2_text" class="groups">2nd span</span>
</div>

And

$(".groups").hide()
$('a').click(function(){
    var rel = $(this).attr('rel');
    $('a').removeClass('active');
    $(this).addClass('active');
    $(".groups").hide()  
    $('#' + rel).fadeIn('slow');
    $('#' + rel + '_text').fadeIn('slow');
});

Answer 3

You maybe a newbie to the jQuery here that's why you're making small mistakes and not a blunder. Let me explain the code for you.

Here is the code that you're using. It doesn't work, and even it doesn't hide the elements on the start up.

http://jsfiddle.net/afzaal_ahmad_zeeshan/ekh2g/

The initial state of your code.

First Mistake

The very first mistake that you're doing has been talked about in posts million of times. Sorry if you never knew that. But, you need to understand that the jQuery code must be in a document load event, not the window load event.

Something like this:

$(document).ready(function () {
  /* all of the code here */
});

Event is handled now

Now, when I removed the $(window).load(function () { ... }) you can see the spans were hidden below.

http://jsfiddle.net/afzaal_ahmad_zeeshan/ekh2g/1/

I have commented out your code and then used an alert to detect the function working. And it was working correctly and perfectly.

Removed the comments; it fadeIn now

Now I have removed the comments around your code. And now once you click on the hyperlinks. You will see the elements fading in.

That is what the issue was. here is the fiddle: http://jsfiddle.net/afzaal_ahmad_zeeshan/ekh2g/2/ You will see, that now the code is working as it's been told to do.

The main issue was the event handler for the code. Which must be always a document ready function.