Title: JavaScript Toggle Function in WordPress Not Working on First Click
Last modified: October 12, 2024

---

# JavaScript Toggle Function in WordPress Not Working on First Click

 *  [alexfostermindme](https://wordpress.org/support/users/alexfostermindme/)
 * (@alexfostermindme)
 * [1 year, 7 months ago](https://wordpress.org/support/topic/javascript-toggle-function-in-wordpress-not-working-on-first-click/)
 * Hello everyone, I’m quite new to coding.
   I’m having an issue with a toggle function
   on a [WordPress page](https://dashtickets.nz/taylor-swifts-economic-impact-how-the-eras-tour-boosted-local-economies/).
   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](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fjavascript-toggle-function-in-wordpress-not-working-on-first-click%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 1 replies (of 1 total)

 *  [Shahin](https://wordpress.org/support/users/skalanter/)
 * (@skalanter)
 * [1 year, 7 months ago](https://wordpress.org/support/topic/javascript-toggle-function-in-wordpress-not-working-on-first-click/#post-18070673)
 * Hello [@alexfostermindme](https://wordpress.org/support/users/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)

The topic ‘JavaScript Toggle Function in WordPress Not Working on First Click’ is
closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/oceanwp/4.1.6/screenshot.png)
 * OceanWP
 * [Support Threads](https://wordpress.org/support/theme/oceanwp/)
 * [Active Topics](https://wordpress.org/support/theme/oceanwp/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/oceanwp/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/oceanwp/reviews/)

## Tags

 * [css](https://wordpress.org/support/topic-tag/css/)
 * [javascript](https://wordpress.org/support/topic-tag/javascript/)

 * 1 reply
 * 2 participants
 * Last reply from: [Shahin](https://wordpress.org/support/users/skalanter/)
 * Last activity: [1 year, 7 months ago](https://wordpress.org/support/topic/javascript-toggle-function-in-wordpress-not-working-on-first-click/#post-18070673)
 * Status: not resolved