jquery toggle on multiple divs only working on first element

ive created a page but it's only toggling the first div and the other 2 arent working... can't work out why! Thanks in advance

var levelopen=false;
$(document).ready(function() {
    $('开发者_JAVA百科.contentlevel').hide();
    $('#levelopener').click(function(){
        if(levelopen==false)
        {
            $('#levelopener').html('[less]'); 
            levelopen=true;
        }
        else
        {
            $('#levelopener').html('[more]');
            levelopen=false;
        }
        $(this).next(".contentlevel").slideToggle(100);
        return false;
    });
});

http://jsfiddle.net/q2qxX/4/

---

This is because you have several elements with the same id (levelopener), ids must be unique. Use a class of levelopener and the selector .levelopener for the click event.

Also, use $(this) to refer to current item that's being clicked for the comparisons like you have for the toggling.

---

You can't have multiple elements with the same id and you should use the this object when referring to the object calling the method.

http://jsfiddle.net/x8RW6/

var levelopen=false;
$(document).ready(function() {
$('.contentlevel').hide();
$('.levelopener').click(function(){
    if(levelopen==false)
        {
        $(this).html('[-]'); 
        levelopen=true;
    }
    else
    {
        $(this).html('[+]');
        levelopen=false;
    }
        $(this).next(".contentlevel").slideToggle(100);
        return false;
});
});

EDIT

after some consideration, I've determined the function needs just a few other tweaks. :P

var levelopen=false;
$(document).ready(function() {
    $('.contentlevel').hide();
    $('.levelopener').click(function(){
        if($(this).next(".contentlevel").is(":visible"))
            $(this).html('[+]'); 
        else
            $(this).html('[-]');

        $(this).next(".contentlevel").slideToggle(100);
        return false;
    });
});

---

in your html , all your links have the same id -levelopener HTML id's should be unique

---

It's because you have multiple a tags with the same id. Switch them to classes and it works perfectly.

http://jsfiddle.net/q2qxX/7/

Updated code based on comment to use this inside the click function.

---

you can't have the same ID's in one html page.

---

Your HTML is not correct IDs must be unique across all elements in a page.

Try this instead...Here is a modified fiddle using a common classname instead of id

http://jsfiddle.net/q2qxX/10/

---

ids must be unique so your selector is only grabbing the first one. Change your id to a class and use a class selector in your jQuery.

$('.levelopener').click(function(){