Woocommerce Question posted in
The official Woocommerce documentation can be found here.

Woocommerce – WordPress anchor click JavaScript open details

I have a WooCommerce webshop where I put unique href anchors next to product variation label:

Down the page is a HTML (details and summary) that I want to open when the corresponding anchor is clicked. I don’t want to use an onclick in the 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>

I have included the html ID’s and JavaScript:

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

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

but so far it’s not working.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    sorry, turned out i needed to enqueue the script properly, I echoed it in the header but that is bad practice and not working either... Thanks anyway!


  2. 0

    Your show element seems wrong. if you want to show element you should use:
    document.getElementById("det").style.display = 'block'; and to hide it:
    document.getElementById("det").style.display = 'none';

    Or you can use classes to indicate hide/show state.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search