Using jQuery for first time, simple problem!

Question

I have some markup like this:

<p><a id="1" href="#">Link 1</a></p>
<p id="1show" class="starthidden">Hi! I get shown when link 1 is clicked</p>

<p><a id="2" href="#">Link 2</a></p>
<p id="2show" class="starthidden">Hi! I get shown when link 2 is clicked</p>

<p><a id="3" href="#">Link 3</a></p>
<p id="3show" class="starthidden">Hi! I get shown when link 3 is clicked</p>

And some javascript like this:

$(document).ready(function(){

    $("#maincontent a").click(function () {
        var id = '#' + $(this).attr("id");
        var show = id + 'show';

        $("id").click(function () {
            $("show").slideToggle("slow");
            return false;
        });

        return false;
    });

});

Now, id and show are both what I'd expect at runtime, but the next line doesn't work. I guess that it's the $("id") bit - though changing this to $(id) doesn't work either.

How do I fix this?

Borgar · Accepted Answer · 2009-01-04 12:27:37Z

4

First off, numerical ID's are not valid HTML. ID attributes must start with a-z. I recommend changing your HTML like this:

<p><a href="#msg1">Link 1</a></p>
<p id="msg1" class="starthidden">Hi! I get shown when link 1 is clicked</p>

<p><a href="#msg2">Link 2</a></p>
<p id="msg2" class="starthidden">Hi! I get shown when link 2 is clicked</p>

<p><a href="#msg3">Link 3</a></p>
<p id="msg3" class="starthidden">Hi! I get shown when link 3 is clicked</p>

Which is both valid and clearer. On devices that don't have javascript/css it will additionally move focus to the right place.

You can then simply pick up the href off the link when the click happens:

$(document).ready(function(){

    $("#maincontent a").click(function () {

        var id = $( this ).attr( 'href' );
        $( id ).slideToggle( 'slow' );
        return false;

    });

});

answered Jan 4, 2009 at 12:27

Borgar

38.8k5 gold badges44 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rich Bradshaw Over a year ago

That's much neater. Not sure why I went for the id route, this makes more sense!

clawr · Accepted Answer · 2009-01-04 12:24:48Z

2

Variables inside double strings aren't parsed as they are in PHP, so you must do $(show). Also, the inner click() binding is unnecessary - you can just run the slideToggle():

$(document).ready(function(){

    $("#maincontent a").click(function () {
        var id = '#' + $(this).attr("id");
        var show = id + 'show';

        $(show).slideToggle("slow");

        return false;
    });

});

answered Jan 4, 2009 at 12:24

clawr

7,8954 gold badges25 silver badges14 bronze badges

1 Comment

Cyril Gupta Over a year ago

You beat me to it with a better analysis TenebrousX

Svante Svenson · Accepted Answer · 2009-01-04 12:27:23Z

2

You don't need the ids! Try this:

$(function(){
    $("a").click(function(){
        $(this).parents("p").slice(0,1).next("p").slideToggle("slow");
    });
});

answered Jan 4, 2009 at 12:27

Svante Svenson

12.5k4 gold badges44 silver badges46 bronze badges

Comments

Cyril Gupta · Accepted Answer · 2009-01-04 12:25:18Z

0

Well, I don't see any element with ID maincontent in the listed code. Anyhow. I see this line in your code

$("id").click

Why the double quotes if you want to access a variable?

answered Jan 4, 2009 at 12:25

Cyril Gupta

13.8k11 gold badges70 silver badges92 bronze badges

Collectives™ on Stack Overflow

Using jQuery for first time, simple problem!

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related