javascriptcumulative-layout-shift

Toggle() or ClassList.toggle()

My page has some problems with CLS. It could be because I'm hiding some elements with JS and here is my question:

For CLS optimization, is it better to use .toggle() or add displayNoneClass to all elements I want to hide and then use .classList.toggle("displayNoneClass")?

Solution

  • It Depends on the current display property of the element which you are going to hide.. When the current element is display:inline and you used display:none; property to hide it, you need to restore that property. where as toggle() changes only in jQuery cache so it doesn't need to restore that property..

    If you don't want to change the CSS property by using !important you can use adding class otherwise can go with toggle() .

    Otherwise its all the same