EasyTOC causing CLS Issues

  • Resolved jupplidhupplid

    (@jupplidhupplid)


    3 years, 11 months ago

    Because easyTOC seems to load opened and then closes, there are major layout shifts caused by it. Unfortunately just disabling the toggle to keep it opened permanently is not a solution as most TOCs are so long they cover a lot of space above the fold.

    Is there a workaround that would load or show the TOC only once it has finished closing? Or load it closed?

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter jupplidhupplid

    (@jupplidhupplid)

    Here’s what I did:

    includes\class.post.php

    add style=”display:none;” to line 1027

    $html = ‘<ul class=”ez-toc-list ez-toc-list-level-1″>’ . $html .’‘;

    which then is

    $html = ‘<ul class=”ez-toc-list ez-toc-list-level-1″ style=”display:none;”>’ . $html .’‘;

    takes care of the layout shift

    Thread Starter jupplidhupplid

    (@jupplidhupplid)

    Marked as solved

    Man, this is genius, I came here researching if TOC might be causing CLS, and you had the same thoughts PLUS found a solution.

    How does your code exactly work?

    $html = '<ul class="ez-toc-list ez-toc-list-level-1" style="display:none;">' . $html . '</ul>';

    @lucio7 use this code. @jupplidhupplid thanks for your solution. That’s exactly what I needed!

    Can this code be simply added to the child theme?

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘EasyTOC causing CLS Issues’ is closed to new replies.