Javascript код не работает внутри WordPress страницы

Question

Я пытаюсь создать несколько списков на одной странице прессы. Каждый в своем собственном 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 9 (см. Ниже), однако, похоже, что он конфликтует с 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?

Answer 1

Попробуйте добавить свой скрипт через wp_footer hook. Просто введите вашу функцию JavaScript в функцию обратного вызова.

    function custom_js_functions(){
      <script>
          //your code goes here.
      </script>
    }
    add_action('wp_footer', 'custom_js_functions');