How to condense my JavaScript code, when they are numbered id's or classes

Question

My code is working properly but I feel it is tedious that everytime I have to a new list item I have to add the numbered corresponding functions. I was wondering if there was a JS trick that can do the whole script instead of me repeating the code each time. So here is the first example

$(document).ready(function () {

    $(".btn-slide_1").click(function () {
        $("#panel_1").animate({
            width: 'toggle'
        });
        $(this).toggleClass("active");
        return false;
    });

    $(".btn-slide_2").click(function () {
        $("#panel_2").animate({
            width: 'toggle'
        });
        $(this).toggleClass("active");
        return false;
    });

    $(".btn-slide_3").click(function () {
        $("#panel_3").animate({
            width: 'toggle'
        });
        $(this).toggleClass("active");
        return false;
    });
    $(".btn-slide_4").click(function () {
        $("#panel_4").animate({
            width: 'toggle'
        });
        $(this).toggleClass("active");
        return false;
    });
    $(".btn-slide_5").click(function () {
        $("#panel_5").animate({
            width: 'toggle'
        });
        $(this).toggleClass("active");
        return false;
    });
    $(".btn-slide_6").click(function () {
        $("#panel_6").animate({
            width: 'toggle'
        });
        $(this).toggleClass("active");
        return false;
    });
    $(".btn-slide_7").click(function () {
        $("#panel_7").animate({
            width: 'toggle'
        });
        $(this).toggleClass("active");
        return false;
    });
    $(".btn-slide_8").click(function () {
        $("#panel_8").animate({
            width: 'toggle'
        });
        $(this).toggleClass("active");
        return false;
    });
    $(".btn-slide_9").click(function () {
        $("#panel_9").animate({
            width: 'toggle'
        });
        $(this).toggleClass("active");
        return false;
    });
    $(".btn-slide_10").click(function () {
        $("#panel_10").animate({
            width: 'toggle'
        });
        $(this).toggleClass("active");
        return false;
    });
    $(".btn-slide_11").click(function () {
        $("#panel_11").animate({
            width: 'toggle'
        });
        $(this).toggleClass("active");
        return false;
    });
    $(".btn-slide_12").click(function () {
        $("#panel_12").animate({
            width: 'toggle'
        });
        $(this).toggleClass("active");
        return false;
    });
    $(".btn-slide_13").click(function () {
        $("#panel_13").animate({
            width: 'toggle'
        });
        $(this).toggleClass("active");
        return false;
    });
    $(".btn-slide_14").click(function () {
        $("#panel_14").animate({
            width: 'toggle'
        });
        $(this).toggleClass("active");
        return false;
    });
    $(".btn-slide_15").click(function () {
        $("#panel_15").animate({
            width: 'toggle'
        });
        $(this).toggleClass("active");
        return false;
    });
    $(".btn-slide_16").click(function () {
        $("#panel_16").animate({
            width: 'toggle'
        });
        $(this).toggleClass("active");
        return false;
    });
    $(".btn-slide_17").click(function () {
        $("#panel_17").animate({
            width: 'toggle'
        });
        $(this).toggleClass("active");
        return false;
    });
    $(".btn-slide_18").click(function () {
        $("#panel_18").animate({
            width: 'toggle'
        });
        $(this).toggleClass("active");
        return false;
    });

});

So it also linked to another div item, it is kind of a domino or accordion for the code above. So the code is very repeteative, but I fear it dosn't work if I don't repeat it in this way, but I am convinced that there is a much more rational way to make these functions work.


var isAboutToggled = false;


$(document).ready(function () {

    $(".btn-slide-1").click(function () {
        $("#panel-1").animate({
            width: 'toggle'
        });
        $(this).toggleClass("active");
        return false;
    });
});

$(document).ready(function () {
    $(".btn-slide-2").click(function () {
        $("#panel-2").animate({
            width: 'toggle'
        });
        $(this).toggleClass("active");
        return false;
    });
});

$(document).ready(function () {
    $(".btn-slide-3").click(function () {
        $("#panel-3").animate({
            width: 'toggle'
        });
        $(this).toggleClass("active");
        return false;
    });
});

$(document).ready(function () {
    $("#panel-1").click(function () {
        $("#panel-1").animate({
            width: 'toggle'
        });
    });
});

$(document).ready(function () {
    $(this).toggleClass("hide");
    return false;
});

$(document).ready(function () {
    $("#panel-4").click(function () {
        $("#panel-4").animate({
            width: 'toggle'
        });
    });
});

$(document).ready(function () {
    $(this).toggleClass("hide");
    return false;
});

$(document).ready(function () {
    $("#panel-5").click(function () {
        $("#panel-5").animate({
            width: 'toggle'
        });
    });
});

$(document).ready(function () {
    $(this).toggleClass("hide");
    return false;
});

$(document).ready(function () {
    $("#panel-6").click(function () {
        $("#panel-6").animate({
            width: 'toggle'
        });
    });
});

$(document).ready(function () {
    $(this).toggleClass("hide");
    return false;
});

$(document).ready(function () {
    $("#panel-7").click(function () {
        $("#panel-7").animate({
            width: 'toggle'
        });
    });
});

$(document).ready(function () {
    $(this).toggleClass("hide");
    return false;
});

$(document).ready(function () {
    $("#panel-8").click(function () {
        $("#panel-8").animate({
            width: 'toggle'
        });
    });
});

$(document).ready(function () {
    $(this).toggleClass("hide");
    return false;
});

$(document).ready(function () {
    $("#panel-9").click(function () {
        $("#panel-9").animate({
            width: 'toggle'
        });
    });
});

$(document).ready(function () {
    $(this).toggleClass("hide");
    return false;
});
$(document).ready(function () {
    $("#panel-10").click(function () {
        $("#panel-10").animate({
            width: 'toggle'
        });
    });
});

$(document).ready(function () {
    $(this).toggleClass("hide");
    return false;
});
$(document).ready(function () {
    $("#panel-11").click(function () {
        $("#panel-11").animate({
            width: 'toggle'
        });
    });
});

$(document).ready(function () {
    $(this).toggleClass("hide");
    return false;
});
$(document).ready(function () {
    $("#panel-12").click(function () {
        $("#panel-12").animate({
            width: 'toggle'
        });
    });
});

$(document).ready(function () {
    $(this).toggleClass("hide");
    return false;
});
$(document).ready(function () {
    $("#panel-13").click(function () {
        $("#panel-13").animate({
            width: 'toggle'
        });
    });
});

$(document).ready(function () {
    $(this).toggleClass("hide");
    return false;
});
$(document).ready(function () {
    $("#panel-14").click(function () {
        $("#panel-14").animate({
            width: 'toggle'
        });
    });
});

$(document).ready(function () {
    $(this).toggleClass("hide");
    return false;
});
$(document).ready(function () {
    $("#panel-15").click(function () {
        $("#panel-15").animate({
            width: 'toggle'
        });
    });
});

$(document).ready(function () {
    $(this).toggleClass("hide");
    return false;
});

$(document).ready(function () {
    $("#panel-16").click(function () {
        $("#panel-16").animate({
            width: 'toggle'
        });
    });
});

$(document).ready(function () {
    $(this).toggleClass("hide");
    return false;
});


$(document).ready(function () {
    $("#panel-17").click(function () {
        $("#panel-17").animate({
            width: 'toggle'
        });
    });
});

$(document).ready(function () {
    $(this).toggleClass("hide");
    return false;
});


$(document).ready(function () {
    $("#panel-18").click(function () {
        $("#panel-18").animate({
            width: 'toggle'
        });
    });
});

$(document).ready(function () {
    $(this).toggleClass("hide");
    return false;
});

Stop creating ids, create a robust element structure and [delegate](https://stackoverflow.com/a/1207393/1169519) the click event instead. — Teemu, Nov 12 '22 at 12:55
This is a common beginner-pattern (with *many* existing answers on SO). Stop using IDs (in general). Give all your buttons a single class and assign click handler to that class. Then give your class and associated panel the same data attribute, eg `data-panel-id=3` then `$("[data-panel-id='" + $(this).data("panel-id") + "']").animate...` — freedomn-m, Nov 12 '22 at 13:23
Thanks for the feedback, i'll give it a go and let you know! This will make my code much lighter! — ambaamba, Nov 12 '22 at 14:12
So I gave it a go and it isn't working. The thing is the list item open a button and then the button open a panel. Then when I click on a new list item all disappear and the button of the clicked list item appears. So basically it is working on 3 levels, but it is not working like an accordion style menu, the div's are separate. Would you have a code example? — ambaamba, Nov 12 '22 at 17:25

score 0 · Answer 1 · answered Nov 12 '22 at 15:11

0

As comments suggested, you should use one collective class to all elements, then do your other code upon them all. However thinking like a programmer, it should be obvious that the number could be used as parameter.

for (var i = 1; i <= 20; i++) {


  $(".btn-slide_" + i).click(function() {
    $("#panel_" + i).animate({
      width: 'toggle'
    });
    $(this).toggleClass("active");
    return false;
  });

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

But again, it's better to use one querySelectorAll('.by-come-class').forEach(function(elem) { /* do stuff with elem */ })

answered Nov 12 '22 at 15:11

IT goldman

14,885
2
14
28

Hi, so I tried and nothing seems to work, they are overlapping, the code above does not call the panel. I can show the link www.angelobarbattini.com – ambaamba Nov 13 '22 at 12:00
try adding a [mre] to your question – IT goldman Nov 13 '22 at 12:40

How to condense my JavaScript code, when they are numbered id's or classes

1 Answers1