JavaScript Toggle Function in WordPress Not Working on First Click

  • alexfostermindme

    (@alexfostermindme)


    1 week, 3 days ago

    Hello everyone, I’m quite new to coding.
    I’m having an issue with a toggle function on a WordPress page. I’m trying to make a hidden table visible when a button is clicked, but the function doesn’t work on the first click—it only works on the second click.


    Here’s the JavaScript I’m using:
    ticketComparisonBtn.addEventListener('click', function() {
    if (comparisonTable.style.display === 'none') {
    comparisonTable.style.display = 'block';
    } else {
    comparisonTable.style.display = 'none';
    }
    });


    The table is initially hidden via CSS with:
    .hidden {
    display: none;
    }


    Does anyone have an idea why it wouldn’t toggle properly the first time and how I can fix this?
    Thanks for the help!

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • Shahin

    (@skalanter)

    Hello @alexfostermindme,

    Thank you for reaching out,

    While customization is outside of standard support, I believe the issue happens because JavaScript doesn’t recognize the table’s initial hidden state set by CSS. Since the display property is applied via CSS, not inline, the check comparisonTable.style.display === ‘none’ doesn’t work on the first click.

    So try this code:

    ticketComparisonBtn.addEventListener('click', function() {
    let computedStyle = window.getComputedStyle(comparisonTable);
    if (computedStyle.display === 'none') {
        comparisonTable.style.display = 'block';
    } else {
        comparisonTable.style.display = 'none';
    }
});

    For further assistance, I recommend getting in touch with a JavaScript expert who can help you directly with this issue.

    I hope it helps.
    Best Regards

Viewing 1 replies (of 1 total)
  • You must be logged in to reply to this topic.