How to modernize the code for collapse elements so that a new id is substituted for each new element?

Question

JavaScript

Hey! Tell me how to make such a "cycle", perhaps it can be called that. The layout has two blocks inside which there is hidden text - made using bootstrap collapse. A change in the text (More/Hide) is attached to the block expansion event. But there is a unique identifier for each block. If there were a limited number of blocks, it would be possible to write an id for each and hang an event on it. But there are a lot of elements, so you need to somehow systematize the addition of an id for a new element, and a bunch of id with a data element. Now for two blocks, the code in js is like this:

$('#toggle-cat-desc').on('show.bs.collapse', function(){
        $(this).next().html('Скрыть');
    });
    $('#toggle-cat-desc').on('hide.bs.collapse', function(){
        $(this).next().html('Подробнее');
    });
    $('#toggle-cat-desc2').on('show.bs.collapse', function(){
        $(this).next().html('Скрыть');
    });
    $('#toggle-cat-desc2').on('hide.bs.collapse', function(){
        $(this).next().html('Подробнее');
    });

Help with a reference to solutions, if you met or tell me please how to implement. I understand that you need to add a variable with a number and somehow add it to the loop. But knowledge of js is not enough yet (

Answer 1

Just make a general class

$('.toggle-cat-desc').on('show.bs.collapse', function(){
        $(this).next().html('Скрыть');
    }).on('hide.bs.collapse', function(){
        $(this).next().html('Подробнее');
    });