[jQuery] Re: Basic help with selectors

if your ID's are only numbered for the sake of trying to match your link to toggle_effect is worth learning about indexing which is extremely useful for 1:1 matching. The allows you to apply class instead of ID to elements

assume changing ID's to classes named toggle-effect_button and toggle_effect,
code would be very straightforward

$(".toggle-effect_button").click(function() {
    var togIndex=$(".toggle-effect_button").index(this)
    $("#toggle_effect").eq(togIndex).toggle('blind',500)
});


MorningZ wrote:

$("a[id=^='toggle_effect_button']").click(function() {         var id = this.id.replace("toggle_effect_button", "");         $("#toggle_effect" + id).toggle('blind',500);         return false; });  On Oct 27, 12:06 pm, Simon Morris <moz...@gmail.com> wrote:   

Hello,  I'm new to jQuery and would appreciate some help with Selectors.  At the moment I know enough to write some clunky repetitive code that violates the DRY (Don't Repeat Yourself) principle  // Toggle Divs                                 $("a#toggle_effect_button").click(function(){                                         $("#toggle_effect").toggle('blind',500);                                         return false;                                 });                                  $("a#toggle_effect_button2").click(function(){                                         $("#toggle_effect2").toggle('blind',500);                                         return false;                                 });                                  $("a#toggle_effect_button3").click(function(){                                         $("#toggle_effect3").toggle('blind',500);                                         return false;                                 });                                  $("a#toggle_effect_button4").click(function(){                                         $("#toggle_effect4").toggle('blind',500);                                         return false;                                 });                                  $("a#toggle_effect_button5").click(function(){                                         $("#toggle_effect5").toggle('blind',500);                                         return false;                                 });                                  $("a#toggle_effect_button6").click(function(){                                         $("#toggle_effect6").toggle('blind',500);                                         return false;                                 });                                  $("a#toggle_effect_button7").click(function(){                                         $("#toggle_effect7").toggle('blind',500);                                         return false;                                 });                                  $("a#toggle_effect_button8").click(function(){                                         $("#toggle_effect8").toggle('blind',500);                                         return false;                                 });  How can I boilerplate code like this? They all refer to similar links that controller the jQueryUI toggle action on DIV containers.  If I assign a class to the "toggle_effect_button" hyperlinks is there a way to locate the correct DIV and toggle it?  Or am I already doing this in the most concise way?  Thanks for your help  ~sm