Якорь WordPress нажмите JavaScript открыть детали

Question

У меня есть интернет-магазин WooCommerce, где я размещаю уникальные href-якоря рядом с ярлыком варианта продукта:

Внизу страницы находится HTML-код (подробности и сводка), который я хочу открыть при нажатии на соответствующую привязку. Я не хочу использовать onclick в href.

(html above) 
<a class="extra_label" id="lunch" href="#anchor">i</a>

(html below) 
<details id="det">
    <summary><a class="leesmeer">Uitgebreide Lunch</a></summary>
    blablabla
</details>

Я включил html ID и JavaScript:

<script>
    document.getElementById("lunch").addEventListener("click", displayopen);

    function displayopen() {
        document.getElementById("det").open = true;
    }
</script>

, но пока он не работает.

Answer 1

извините, оказалось, что мне нужно правильно поставить скрипт в очередь, я повторил его в заголовке, но это плохая практика и тоже не работает ... В любом случае, спасибо!

Answer 2

Ваш элемент шоу кажется неправильным. если вы хотите показать элемент, вы должны использовать: document.getElementById("det").style.display = 'block'; и скрыть его: document.getElementById("det").style.display = 'none';

Или вы можете использовать классы, чтобы указать состояние скрытия / показа.