Doing the same function with Multiple click events in jquery

$(document).on('click','#closeNewProductExpand', function() {

        $('#newProductExpand').css('width', '0');
    });

    $(document).on('click', '#searchProduct', function() {

        $('#newProductExpand').css('width', '0');
    });

    $(document).on('click', '#productsData', function() {

        $('#newProductExpand').css('width', '0');
    });

Here I want to set the width to 0 of #newProductExpand if one of the above 3 buttons is clicked.Is there any way to write this code rather than wasting such a larger space.I appreciate your help.Thanks

Answer

you can combine selectors with comma.

$(document).on('click','#closeNewProductExpand, #searchProduct, #productsData', function() {
    $('#newProductExpand').css('width', '0');
});

However, as an alternative I suggest you give all these elements a common class, and use that as the selector. That way, if you need to add more elements to the set, you just give them the same class, you don’t need to make the list of selectors longer every time.