I tried to make slide toggle effect of showing and hiding ul list as result of click on an element (h3 tag). I didn't know in first place that bootstrap has that functionality and I tried with jQuery but my code seems to behave very strange. It detects the event and hide desired ul list but right after that it shows it again without second click on h3 tag. Then I tried with data-target and data-toggle attributes as on display but with the same result. Why is this happening? (I tried to put a tag instead of h3 tag but again with the same results)(ul is dynamically filled)
<h3 id="sizesLabel" data-toggle="collapse" data-target="#sizes">Sizes<span class="bi bi-chevron-down ml-1"></span></h3>
<ul id="sizes" class="d-flex flex-column">
</ul>
I found the solution and if someone ever come on this page with the same problem this is the solution. slideToggle() is NOT going to work properly if it triggers element with display flex. I just removed d-flex and flex-column and it works perfectly now!