Is it bad practice to have multiple Jquery click events?
Hi new dev here! As a new developer I'm trying to get rid of any bad habit I have, and something I always cringe at that I do is multiple click events. For some reason I always feel like there is a neater way of doing it. Is it normal in your experience to see this sort of code? Is it bad? Please let me know! (Note: the $(denim-overlay-section).toggle() is for text that's different for every section. So denim has a denim blurb, comfort has a comfort blurb etc) The .active class changes a plus button image to a minus button image.
$('#denim-overlay-section, #true-overlay-section, #comfort-overlay-section, #jegging-overlay-section, #tummy-overlay-section, #chambray-overlay-section')
.hide();
$('#classicBtn').click(function () {
$('#denim-overlay-section').toggleClass('denim-overlay');
$('#denim-overlay-section').toggle();
$('.plusBtn-classic').toggleClass('active');
});
$('#trueBtn').click(function () {
$('#true-overlay-section').toggleClass('denim-overlay');
$('#true-overlay-section').toggle();
$('.plusBtn-true').toggleClass('active');
});
$('#comfortBtn').click(function () {
$('#comfort-overlay-section').toggleClass('denim-overlay');
$('#comfort-overlay-section').toggle();
$('.plusBtn-comfort').toggleClass('active');
});
$('#jeggingBtn').click(function () {
$('#jegging-overlay-section').toggleClass('denim-overlay');
$('#jegging-overlay-section').toggle();
$('.plusBtn-jegging').toggleClass('active');
});
$('#tummyBtn').click(function () {
$('#tummy-overlay-section').toggleClass('denim-overlay');
$('#tummy-overlay-section').toggle();
$('.plusBtn-tummy').toggleClass('active');
});
$('#chambrayBtn').click(function () {
$('#chambray-overlay-section').toggleClass('denim-overlay');
$('#chambray-overlay-section').toggle();
$('.plusBtn-chambray').toggleClass('active');
});