Adding a css class to a div on click

Issue

I have a main nav bar with different items, I do also have a collapsed one with the exact same items but once the collapsed one is open I want to add a css class to each item of the navbar and then re delete it once I close the nav. Any idea how can I do this ?

<ul>
                        <li class="nav-item active">
                          <a class="nav-link" href="/">Home</a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" href="business">Business</a>
                        </li>
</ul>

I want to add class name nav-link-collapsed as an exemple once it's open

Solution

I have created my own JS who does this for me :

When I open

  $(".navbar-toggler").on("click", function() {
    $(".collapse").toggleClass("show");
    $(".nav-item").toggleClass("collapsed-space")
    $(".navbar-close").show();
  });

When I close

  $(".navbar-close").on("click", function() {
    $(".collapse").toggleClass("show");
    $(".navbar-close").hide();
    $("body").toggleClass("layer-open");
    $(".nav-item").toggleClass("collapsed-space")
    // $(header).toggleClass("sticky-not");
    $(".dark-overlay").click(function() {
      $(".collapse").removeClass("show");
      $("body").removeClass("layer-open");
      $(".nav-item").removeClass("collapsed-space")
    });
  });

Answered By - Ayoub