How to JQuery DIV toggle more dynamic?

Question

How do I make the below function more dynamic for example commentLink and commentContainer will have an ID after them like this commentLink-2289 commentContainer-2289 because there will be multiple ones in a list.

Javascript

$(function() {
    $("#commentLink").click(function() 
   {
        $("#commentContainer").toggle();
        if ($("#commentContainer").is(":visible")) 
        {
            $("#commentContainer").load($(this).attr("href"));
        } else 
        {
             $("#commentContainer").html("Loading..."); //Or just leave it as is...
        }
        return false; //Prevent default action
   });
});

Html

<div id="SystemNews">
 <ul id="dc_news">
   <li>
     <a href="/Home/SystemNews/69" id="commentLink-0">Comments</a>
     <div id='commentContainer-0' style="display:none;">    Loading...</div>
   </div>
   </li>
   </ul> 
</div>

Note: Please provide a working example, I learn best by example thanks

Answer 1

Try this:

jQuery(function($){ 
  $("a[id^='commentLink-']").click(function(){
    match = this.id.match(/commentLink-(\d+)/);
    container = $("div#commentContainer-"+match[1])
    container.toggle();
    if (container.is(":visible")) {
        container.load($(this).attr("href"));
    } else {
        container.html("Loading...");
    }
    return false; //Prevent default action
  });
});

But It would help if you can post the html or a link to the html so we can see what the format you are working with is. I have no idea if the error you are getting is from my code or yours (since my code is just a mod of yours). Which line number is the error on in the script?

---

Edit My original code had a bug with the this.id.match line, that's been fixed above, try it now.

---

Edit : Also, there is an extra closing </div> in your provided HTML, not sure if that's a typo or not, but it should be removed.

The click event should be wrapped in $(document).ready(function(){ ... }); so that jquery can accurately access the dom (since you are querying for <a> and <div> elements). I'm getting a problem where the last return false; is not being reached, I suspect it has something to do with the is(:visible) code. What is the intended function of that if/else block?