How to prescribe logic to the spoiler so that it closes on the second click along with all the others?

Question

JavaScript

I wrote spoilers, the goal: you can open only one spoiler, all the others are always closed, but it is also possible to close everything. That is, if I open one spoiler, then on the first click, everything closes, and it opens. On the second click on the same spoiler, it closes.
Here's what I've got so far: tyts
I can't figure out the logic of the script, how to interconnect everything.

Answer 1

When closing spoilers, it is necessary not to process the current one:

$('.spoiler-header').click(function() {
  const $thisContainer = $(this).parents('.spoiler-container');

  $('.spoiler-container')
    .not($thisContainer)
    .removeClass('active')
    .find('.spoiler-content')
    .slideUp();

  $thisContainer
    .toggleClass('active')
    .find('.spoiler-content')
    .slideToggle();
});

Answer 2

it's called - accordion
https://www.w3schools.com/howto/howto_js_accordion.asp

Answer 3

I'm not a great specialist, but I would have acted like this - I would have implemented the opening mechanism through an animation hung on a class of type .active, and on click, if the element is an asset, we remove this class from it, if not an asset - we add it to it, and for everyone else - remove. the function to remove all active classes from this collection of elements can be taken out separately and hung on the button, by clicking on which everyone should collapse, if this option is required separately.