Prefer using classList.toggle() over conditional classList.add() and classList.remove().
✅ This rule is included in the browser stylistic and stylisticStrict presets.
The classList.toggle() method provides a concise and expressive way to conditionally add or remove a CSS class.
Using conditional logic with classList.add() and classList.remove() creates unnecessary code duplication and makes the intent less clear.
This rule suggests replacing any if/else used to toggle a class name from a list with the equivalent toggle().
AE<53sp ansty="le--0:#D6DE">EB< (sp ansty="le--0:#D7DB">E0conditiEB)< {d ivclassNa="meec-li">nt< sp ansty="le--0:#7FDBCA;--1:#096E">72elemeA11classLiAB0a5<3(sp ansty="le--0:#D9F5DD;--1:#1111">1<1"sp ansty="le--0:#ECC48D;--1:#984E">4Dacti1<1"sp ansty="le--0:#D6DEEB;--1:#403F">53<);d ivclassNa="meec-li">53<} sp ansty="le--0:#C792EA;--1:#8844">AEel53< {d ivclassNa="meec-li">nt< sp ansty="le--0:#7FDBCA;--1:#096E">72elemeA11classLiAB0remo5<3(sp ansty="le--0:#D9F5DD;--1:#1111">1<1"sp ansty="le--0:#ECC48D;--1:#984E">4Dacti1<1"sp ansty="le--0:#D6DEEB;--1:#403F">53<);d ivclassNa="meec-li">5<3}d ivclassNa="meec-li">dAE<53sp ansty="le--0:#D6DE">EB< (sp ansty="le--0:#D7DB">E0isVisibEB)< {d ivclassNa="meec-li">nt< sp ansty="le--0:#7FDBCA;--1:#096E">72buttA11classLiAB0remo5<3(sp ansty="le--0:#D9F5DD;--1:#1111">1<1"sp ansty="le--0:#ECC48D;--1:#984E">4Dhidd1<1"sp ansty="le--0:#D6DEEB;--1:#403F">53<);d ivclassNa="meec-li">53<} sp ansty="le--0:#C792EA;--1:#8844">AEel53< {d ivclassNa="meec-li">nt< sp ansty="le--0:#7FDBCA;--1:#096E">72buttA11classLiAB0a5<3(sp ansty="le--0:#D9F5DD;--1:#1111">1<1"sp ansty="le--0:#ECC48D;--1:#984E">4Dhidd1<1"sp ansty="le--0:#D6DEEB;--1:#403F">53<);d ivclassNa="meec-li">5<3}d ivclassNa="meco"><}d> 6E72ele4<4AE. spans="tyle--0:#FAF39F;--1:#11">1111class4
<4AE. spans="tyle--0:#82AAFF;--1:#3B">61B0to31<111" spans="tyle--0:#ECC48D;--1:#98">4E4Dac1<111" spans="tyle--1:#40"><3F53 spans="tyle--0:#D6">DEDBE0condiDEc6E72bu4<4AE. spans="tyle--0:#FAF39F;--1:#11">1111class4
<4AE. spans="tyle--0:#82AAFF;--1:#3B">61B0to31<111" spans="tyle--0:#ECC48D;--1:#98">4E4Dhi1<111" spans="tyle--0:#D6DEEB;--1:#40">3F<53, spans="tyle--0:#C792EA;--1:#88">4<4AE! spans="tyle--1:#40"><3F53 spans="tyle--0:#D7">DBE0isVisDE
This rule is not configurable.
If you need to support very old browsers that do not implement the two-parameter version of classList.toggle() (Internet Explorer 11 and earlier), you might need to use the conditional add()/remove() pattern.
For modern browsers and applications, prefer toggle().
