Question

I am discovering JQuery and can’t find an answer to my question, after a lot of research, because I don’t know how to express it well.

I have 2 rulers + 2 guides on my page and 2 buttons to show or hide them.
I wrote something that works but I would like to optimize the code by making it shorter.

Here it is:

$('#ruler-bg1, #ruler-bg2').hide();

$('#ruler1').click(function() {
  $('#ruler-bg1').slideToggle(100);
  $('#guide1').toggleClass('guide-on');
});

$('#ruler2').click(function() {
  $('#ruler-bg2').slideToggle(100);
  $('#guide2').toggleClass('guide-on');
});

What I can’t figure out is how to group the 2 functions so a click on #ruler+number shows #ruler-bg+same_number and #guide+same_number.

Answer 1

Something like this should do:

$('#ruler1, #ruler2').click(function(){
    var num = this.id.substr(6);

    $('#ruler-bg' + num).slideToggle(100);
    $('#guide' + num).toggleClass('guide-on');
});

It would probably be nicer if there was some structural relationship between the element clicked and the elements acted upon…