Как предотвратить переключение аккордеона в начальной загрузке, когда пользователь нажимает определенную часть кнопки, к ⇐ CSS

[Anonymous]

Я использую бутстрап.
Здесь вы можете видеть, что это стандартный аккордеон. Однако я хочу от него нестандартного поведения.
Когда пользователь нажимает на элементы с «опцией» класса, он выбирает «подпараметры», как и должно быть. Но при этом он также расширяет элемент аккордеона.
На мой взгляд, это раздражающее поведение.
index.html:

Код: Выделить всё

[list]
[*][h4]Collection[/h4]

[*]




Deep Groove Bearings

(560)




6000 Series(450)
[*]6200 Series(32)
[*]6300 Series(69)

[/list]

index.js:

Код: Выделить всё

document.querySelectorAll('input.option').forEach(option => {
const subOptions = option.closest('li').querySelectorAll('input.subOption');

option.onclick = function() {
subOptions.forEach(subOption => {
subOption.checked = this.checked;
});
}

subOptions.forEach(subOption => {
subOption.onclick = function() {
const checkedCount = option.closest('li').querySelectorAll('input.subOption:checked').length;

option.checked = checkedCount > 0;
option.indeterminate = checkedCount > 0 && checkedCount < subOptions.length;
}
});
});

Как мне добиться такого поведения, чтобы когда пользователь нажимал на эту опцию:

Код: Выделить всё

Deep Groove Bearings

подопции выбираются, но аккордеон остается в исходном состоянии: либо свернут, либо развернут.
Я пробовал убрать его с кнопки сам по себе, но тогда я не могу получить желаемый вид.
Я также пробовал задавать вопросы различным ИИ разными способами, в том числе с помощью .stopPropagation(), .preventDefault(), .stopImmediatePropagation, но неудачно.
Возможно, эти методы были применены не к тем элементам.
Цель — не нарушить стиль.
Есть мысли по этому поводу как это сделать без добавления большого количества кода?

Подробнее здесь: https://stackoverflow.com/questions/787 ... -on-specif