toggle class with force

?optimizely_x=VARIATIONID&optimizely_token=PUBLIC

?optimizely_x_audiences=AUDIENCESID

&optimizely_force_tracking=true

const toggleClass = (element, className, force) => {
     element.classList.toggle(className, force);
    };


const div = document.querySelector("div");

// Toggle the class "active" on the div
toggleClass(div, "active");

// Force add the class "highlight"
toggleClass(div, "highlight", true);

// Force remove the class "hidden"
toggleClass(div, "hidden", false);



        const box = document.querySelector(".box");
        const button = document.getElementById("toggleBtn");

        button.addEventListener("click", () => {
            toggleClass(box, "active");
        });




 const toggleSpan = (currentTarget, force = true) => {
        const compareBlock = currentTarget.closest(".compare-block");
        if (!compareBlock) return;

        const currentSpan = compareBlock.querySelector("span");
        if (currentSpan) {
            toggleClass(currentSpan, "show", force);
            if (currentSpan.className.indexOf("show") > -1) {
                currentSpan.setAttribute("aria-hidden", "false");
            } else {
                currentSpan.setAttribute("aria-hidden", "true");
            }
        }
    };

 $(this).toggleClass(function(){
      return $(this).is('.la-plus, .la-times') ? 'la-plus la-times' : 'la-plus';
    })

.neumorphism-toggle {

    position: relative;

    transition: transform .3s;

    transform: scale(var(--scale, 1)) translateZ(0);

    &:active {

        --scale: .6;

    }

    input {
9
        display: none;

        & + label {

            background: #fff;

            border-radius: 9px;

            padding: px 0 16px 20px;

            min-width: 208px;

            display: block;
16
            cursor: pointer;

            position: relative;

            box-shadow: -12px -12px 24px var(--light-shadow, transparent), 12px 12px 24px var(--shadow, transparent);

/*!
 * Color mode toggler for Bootstrap's docs (https://getbootstrap.com/)
 * Copyright 2011-2023 The Bootstrap Authors
 * Licensed under the Creative Commons Attribution 3.0 Unported License.
 */
 
(() => {
  'use strict';
 
  const storedTheme = localStorage.getItem('theme');
 
  const getPreferredTheme = () => {
    if (storedTheme) {
      return storedTheme;
    }
 
    return window.matchMedia('(prefers-color-scheme: dark)').matches
      ? 'dark'
      : 'light';
  };
 
  const setTheme = function (theme) {
    if (
      theme === 'auto' &&
      window.matchMedia('(prefers-color-scheme: dark)').matches
    ) {
      document.documentElement.setAttribute('data-bs-theme', 'dark');
    } else {
      document.documentElement.setAttribute('data-bs-theme', theme);
    }
  };
 
  setTheme(getPreferredTheme());
 
  const showActiveTheme = (theme, focus = false) => {
    const themeSwitcher = document.querySelector('#bd-theme');
 
    if (!themeSwitcher) {
      return;
    }
 
    const themeSwitcherText = document.querySelector('#bd-theme-text');
    const activeThemeIcon = document.querySelector('.theme-icon-active use');
    const btnToActive = document.querySelector(
      `[data-bs-theme-value="${theme}"]`
    );
    const svgOfActiveBtn = btnToActive
      .querySelector('svg use')
      .getAttribute('href');
 
    document.querySelectorAll('[data-bs-theme-value]').forEach((element) => {
      element.classList.remove('active');
      element.setAttribute('aria-pressed', 'false');
    });
 
    btnToActive.classList.add('active');
    btnToActive.setAttribute('aria-pressed', 'true');
    activeThemeIcon.setAttribute('href', svgOfActiveBtn);
    const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`;
    themeSwitcher.setAttribute('aria-label', themeSwitcherLabel);
 
    if (focus) {
      themeSwitcher.focus();
    }
  };
 
  window
    .matchMedia('(prefers-color-scheme: dark)')
    .addEventListener('change', () => {
      if (storedTheme !== 'light' || storedTheme !== 'dark') {
        setTheme(getPreferredTheme());
      }
    });
 
  window.addEventListener('DOMContentLoaded', () => {
    showActiveTheme(getPreferredTheme());
 
    document.querySelectorAll('[data-bs-theme-value]').forEach((toggle) => {
      toggle.addEventListener('click', () => {
        const theme = toggle.getAttribute('data-bs-theme-value');
        localStorage.setItem('theme', theme);
        setTheme(theme);
        showActiveTheme(theme, true);
      });
    });
  });
})();