0

I am trying to figure out, how to prevent element collapsing and opening again if it is already open. There are multiple collapse elements and I want one to be always open. When collapsed element is clicked, one that is showing collapses and other opens up.

Here is my script to handle the collapse:

$('.li').click(function() {
    var current = $(this).find('collapse');
    if(!(current).hasClass('show')) {
        $('.collapse').removeClass('show');
        current.addClass(show);
    };
});

It works fine when clicking collapsed element, but when the clicked element is showing, it collapses and shows up again. How to prevent this? I assume I am not very far from the solution, but I cannot figure it out.

EDIT:

here is a fiddle for the case:

https://jsfiddle.net/gc7ejfps/1/

I got edited the script a bit for the case, but now it works as it should. Now my question is, how to add transition to this? I tried with an example from bootstrap collapse (Customizing the collapse transition in bootstrap 4), but didn't get it to work.

vaemps
  • 27
  • 6
  • You'll have to include your HTML too, so we can see what is happening in your code. – Kokodoko Dec 23 '22 at 09:10
  • 1
    `$(this).find('collapse')` will try to find a `` element in your clicked element (`this`). You probably mean to do `$(this).find('.collapse')` instead. But even so, this would not find an element, if the clicked element itself has a className of `collapse`. – Carsten Massmann Dec 23 '22 at 09:35
  • Also your addClass needs quotes around the show, but we would be able to answer the question better if you added a [mcve] to your question using the snippet button to include your html too – Pete Dec 23 '22 at 10:43
  • I've added a fiddle to the original post. I got the toggle to work, but as I had to remove bootstrap collapse to get it work, the transition doesn't work anymore. What is the best way to fix this? – vaemps Dec 24 '22 at 08:15

0 Answers0