Код Javascript не работает на странице WordPress

Я пытаюсь создать несколько списков на странице Word Press. Каждый в своем div. Например:

    <strong>List One</strong>
    <div>
      <ul>
        <li>Item One</li>
        <li>Item Two</li>
        <li>Item Three</li>
        <li>Item Four</li>
        <li>Item Five</li>
      </ul>
    </div>

    <strong>List Two</strong>
    <div>
      <ul>
        <li>Item Uno</li>
        <li>Item Dos</li>
        <li>Item Tre</li>
      </ul>
    </div>

Я хотел бы, чтобы текст заголовка списка был кликабельным

<strong><a href = "#">List One</a></strong>

и скрыть или показать при нажатии.

где по умолчанию должно быть скрыто

<div style = "display: none";>
 ...
</div>

Я могу сделать это с помощью javascript (см. ниже), однако, похоже, он конфликтует с wordpress/php/template/plugins и т. д.

Хотя на моей странице есть только текст и код (см. ниже), она не будет работать на 100%. иногда требуется несколько кликов, чтобы это сработало

    function toggle_visibility(id) {
      var e = document.getElementById(id);
      if (e.style.display == 'block')
        e.style.display = 'none';
      else
        e.style.display = 'block';
    }
    <strong><a href = "#"  onclick = "toggle_visibility('list_one');">List One</a></strong>
    <div id = "list_one" style = "display: none">
      <ul>
        <li>Item One</li>
        <li>Item Two</li>
        <li>Item Three</li>
        <li>Item Four</li>
        <li>Item Five</li>
      </ul>
    </div>

    <strong><a href = "#"  onclick = "toggle_visibility('list_two');">List Two</a></strong>
    <div id = "list_two" style = "display: none">
      <ul>
        <li>Item Uno</li>
        <li>Item Dos</li>
        <li>Item Tre</li>
      </ul>
    </div>

Вопрос: Можно ли сделать это по-другому, чтобы получить такой же эффект. то есть щелкнуть ссылку и показать или скрыть DIV?