Multple classes aren't allowed in chosenClass #2443

Activity

1. mrleblanc101 commented on Sep 19, 2025

   

   mrleblanc101

   on Sep 19, 2025

   More actions

   Same for ghost-class

   👍React with 👍1Reacted by Tyler Petrov
2. jankapunkt commented on May 5, 2026

   

   jankapunkt

   on May 5, 2026

   More actions

   I can just assume that it was created during a time when manual plain css was the goto way. In days of tailwind etc. this is obviously not desired.
3. jankapunkt commented on May 5, 2026

   

   jankapunkt

   on May 5, 2026

   More actions

   Here is a minimal example that is backward compatible and es5 compatible.

   @owen-m1 if you don't see any issues with it I can create a PR what do you think?

   function toggleClass(el, name, state) {
       if (el && name) {
         var _toggle = function (_name, _state) {
           if (el.classList) {
             el.classList[_state ? 'add' : 'remove'](_name);
           } else {
             var className = (' ' + el.className + ' ').replace(R_SPACE, ' ').replace(' ' + _name + ' ', ' ');
             el.className = (className + (_state ? ' ' + _name : '')).replace(R_SPACE, ' ');
           } 
         }
         var names = name.split(' ');
         for (var i = 0; i < names.length; i++) {
           _toggle(names[i], state);
         }
       }
   }

   Usage example:

   <div id="moo" class="lol">text</div>
   <button onclick="toggleClasses()">toggle</button>

   .foo {
     font-weight: bold;
   }
   
   .bar {
     color: #f00;
   }

   let state = false
   function toggleClasses () {
     const el = document.querySelector('#moo')
     toggleClass(el, 'foo bar', !state)
     state = !state
   }

   🚀React with 🚀1Reacted by Tyler Petrov