How can I toggle the ‘display’ style of an item?

I am currently developing a website using KirbyCMS and I am using JavaScript to add effects to it. Upon expansion, it works as expected, however when I collapse it, the items which have the ‘hidden’ class don’t toggle their styles back to ‘display:none’

My code is as follows:

HTML/PHP:

<?php foreach ($projectsPage->children() as $project): ?>
    <section class="project">
        <div class="carousel">
            <ul class="ul draggable">
                <!-- Project Tags -->
                <li class="li d-flex project-info">
                    <?php snippet('tags', compact('project')) ?>
                    <!-- Project Cover -->
                    <figure class="d-flex w-100">
                        <?php if ($cover = $project->cover()): ?>
                        <img src="<?= $cover->crop(1280, 800)->url() ?>" alt="<?= $cover->alt() ?>">
                        <?php endif ?>
                        <figcaption class="hidden mx-5 summary">
                            <?= $project->text() ?>
                        </figcaption>
                    </figure>
                </li>
                <!-- End of Project Tags -->

                <!-- Project Images -->
                <?php foreach ($project->images()->offset(1) as $image) : ?>
                <li class="li hidden">
                    <?php if ($image->caption()->isNotEmpty()) : ?>
                    <figure class="d-flex w-100">
                        <img src="<?= $image->crop(1280, 800)->url() ?>" alt="<?= $image->alt() ?>" />
                        <figcaption class="ms-5 summary">
                            <?= $image->caption()->smartypants() ?>
                        </figcaption>
                    </figure>
                    <?php else: ?>
                    <figure class="w-100 mx-2">
                        <img src="<?= $image->resize(null, 800)->url() ?>" alt="<?= $image->alt() ?>" />
                    </figure>
                    <?php endif ?>
                </li>
                <?php endforeach ?>
                <!-- End of Project Images -->
            </ul>
        </div>
    </section>

CSS:

/* Hidden elements */
/* Individual list-item/image stylings */
.li {
  display: flex;
  width: fit-content;
  height: 100%;
  transition: var(--transition);
}

.hidden {
  opacity: 0;
  display: none;
  transition: var(--transition); /* Transition opacity */
}

/* Show object */
.showObject {
  opacity: 1;
  animation: fadeIn 0.75s ease-in-out;
  transition: var(--transition); /* Transition opacity */
  /* display: block; Remove display property */
}

JavaScript:

const sections = document.querySelectorAll('section');
let isDragging = false;

interact('.draggable').on('dragstart', () => {
  isDragging = true;
}).on('dragend', () => {
  isDragging = false;
});

sections.forEach(section => {
  section.addEventListener('click', () => {
    if (!isDragging) {
      sections.forEach(s => {
        if (s !== section && s.classList.contains('active')) {

          s.classList.remove('active');
          s.querySelectorAll('.hidden.showObject').forEach(obj => obj.classList.remove('showObject'));
          s.style.transition = 'transform 0.75s ease-in-out, height 0.75s ease-in-out';
          s.style.transform = 'none';
          s.removeAttribute('data-x');
          s.style.height = '30vh';

          // Remove 'display: block' from hidden list items on collapse
          const hiddenItems = s.querySelectorAll('.li.hidden');
          hiddenItems.forEach(item => {
            item.style.display = 'none'; // Reset the display property
          });
        }
      });

      const isActive = section.classList.toggle('active');
      const hidden = section.querySelectorAll('.hidden');

      setTimeout(() => {
        hidden.forEach(hide => {
          hide.style.display = 'block'; // Show the hidden object
          setTimeout(() => {
            hide.classList.toggle('showObject', isActive);
          }, 750); // Delay the addition of the showObject class
        });
      }, 750); // Delay showing the hidden objects

      const rect = section.getBoundingClientRect();
      const translateX = (window.innerWidth / 2) - (rect.width / 2) - rect.left;

      section.style.transition = 'transform 0.75s ease-in-out, height 0.75s ease-in-out';
      section.style.transform = isActive ? `translateX(${translateX}px) scale(1.05)` : 'none';
      section.style.height = isActive ? '80vh' : '30vh';

      const draggable = section.querySelector('.draggable');
      if (!isActive) {
        draggable.style.transform = 'translateX(0)';
        draggable.removeAttribute('data-x');
      }
    }
  });
});

interact('.draggable').draggable({
  inertia: true,
  modifiers: [
    interact.modifiers.restrictRect({
      restriction: 'parent',
      endOnly: true
    })
  ],
  autoScroll: true,

  listeners: {
    move: event => {
      const target = event.target;
      const x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx;
      target.style.transform = `translate(${x}px)`;
      target.setAttribute('data-x', x);
    },
    end: event => {}
  }
});

Thank you so much in advance!

I tried toggling the display styles through JavaScript but it doesn’t seem to work.