Как модернизировать код для collapse — элементов чтобы для каждого нового элемента подставлялся новый id?

Question

[Happymalina]

Привет! Подскажите как сделать такой "цикл", наверно это так можно назвать. В верстке есть два блока внутри которых есть скрытый текст - сделан с помощью bootstrap collapse. К событию раскрытия блока привязано изменение текста (Подробнее/Скрыть). Но там присутствует уникальные идентификатор для каждого блока. Если бы блоков было ограниченное количество - можно было бы для каждого прописать id и на него повесить событие. Но элементов предполагается много, поэтому нужно как то систематизировать добавление id для нового элемента, и связку id c data-элементом. Сейчас для двух блоков код в js такой:

$('#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('Подробнее');
    });

Помогите ссылочкой на решения,если встречали или подскажите пожалуйста как реализовать. Понимаю что нужно добавить переменную с числом и как то в цикл ее добавить. Но знаний по js пока не хватает(

Answer 1

[Сергей delphinpro]

Просто сделайте общий класс

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

Comments

[Happymalina]

Наверно мне нужно было еще сопроводить свой вопрос html кодом, не подумала.. если прямо из бустрапа брать - там же суть такая что элементу,который раскрывает - задается атрибут data-target c id элемента который будет раскрыт ( то есть получается data-target="#toggle-cat-desc"). getbootstrap.com/javascript/#collapse
Толи просто бутстрап не продемонстрировал что можно использовать класс вместо id для многократного использования на странице, толи можно использовать только id..

[Сергей delphinpro]

Happymalina: Да, бутстрапу нужны ID, и расставить эти ID - задача бекэнда. Вам же для реализации своей функции (поменять текст) достаточно добавить всем элементам одинаковый класс и использовать подобный код.

[Happymalina]

ааа))) спасибо огромное!))