OnClick Doesn't Work First Time

Question

I have tried many different ways to overcome this issue, but unfortunately I have been unable to find the solution. (And yes, I have even tried searching for a solution to no avail.)

The trigger does not operate on the first go, however it does work there after. I have tried setting the targetToggle to 0 and it still did not work.

Any help on this would be much appreciated!

 $(document).ready(function() { $('.toggleTarget').hide(); $(".products-item").click(function() { var a = $(this).data('number'); var toggleTargetId = $(this).attr('data-target'); var toggleTarget = $(document.getElementById(toggleTargetId)); if (a === "0") { toggleTarget.show("slow", "swing"); $(this).data('number', '1'); } else { toggleTarget.hide("slow", "swing"); $(this).data('number', '0'); } }); }); 

 .products-item { height: auto; width: 350px; display: inline-block; margin: 30px; padding-top: 20px; padding-left: 20px; padding-right: 20px; border: solid 2px #f5f5f5; border-radius: 10px; background-color: #f5f5f5; cursor: pointer; white-space: nowrap; vertical-align: top; transition: all 0.25s ease-in-out; } .products-item-label { width: 100px; height: auto; font-size: 12px; font-family: Comfortaa; display: block; position: relative; padding: 10px; left: -22px; color: #fff; background-color: #015c94; border-top-right-radius: 5px; border-bottom-right-radius: 5px; } .products-item-img { height: auto; width: auto; display: inline-block; border-radius: 190px; transition: all 0.25s ease-in-out; z-index: 10; } .products-item-text { width: auto; height: auto; bottom: 0px; left: 0px; margin: 10px; padding: 15px; display: inline-block; font-family: Comfortaa; font-size: 14px; text-align: center; border-radius: 5px; color: #333; background-color: transparent; transition: all 0.25s ease-in-out; } .products-item:hover { border: solid 2px #bae9ff; background-color: #bae9ff; } .products-item:hover .products-item-text { color: #015c94; border-radius: 5px; } .products-item:hover .products-item-details { color: #015c94; transition: color 0.25s ease-in-out; } .products-item-details { height: auto; width: 100%; padding-top: 0px; padding-bottom: 25px; font-size: 14px; text-align: center; } .products-item-details p { width: 350px; word-break: break-word; word-break: break-all; word-wrap: break-word; white-space: pre-wrap; } .products-item-details ul { width: 350px; margin: 0; display: inline-block; } .products-item-details li { width: 350px; padding-top: 5px; padding-bottom: 5px; text-align: center; overflow: hidden; word-wrap: break-word; white-space: pre-wrap; } .products-item-details-table { background-color: transparent; width: 100%; font-family: Comfortaa; font-size: 14px; padding-top: 20px; padding-bottom: 20px; table-layout: fixed; white-space: nowrap; /*border-collapse: collapse; REMOVE BORDER GAPPING */ } .products-item-details-table tr { width: 600px; } .products-item-details-table th { background-color: #ccc; color: #fff; font-size: 15px; font-weight: normal; width: auto; border: none; text-align: center; transition: all 0.25s ease-in-out; } .products-item-details-table td { background-color: #fff; width: 200px; text-align: left; transition: all 0.25s ease-in-out; } .products-item:hover .products-item-details-table th { background-color: #015c94; color: #fff; font-size: 15px; font-weight: normal; width: auto; border: none; text-align: center; } .products-item:hover .products-item-details-table td { background-color: #fff; color: #015c94; width: 200px; text-align: left; } .products-item-link { width: 100%; height: 20px; font-size: 16px; color: #ccc; text-decoration: none; cursor: pointer; transition: all 0.25s ease-in-out; } .products-item-link:hover { color: #666; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div id="info-9-btn" class="products-item" data-target="info-9" data-number="0"> <div class="products-item-label">NEW</div> <div class="products-item-img buoy-9"></div> <br /> <div class="products-item-text">Round Buoy</div> <div id="info-9" class="products-item-details toggleTarget"> <ul style="list-style:none; padding:0; height:auto;"> <li>500mm x 500mm</li> <li>Foam Filled</li> <li>Can be engineered into a floating barrier to designate work zones, cordon off weir walls and other dangerous water areas.</li> <li>Can be fitted with a mooring tube and used as a mooring buoy.</li> <li>Can be used for any water application, where needed.</li> </ul> <p>Fully Owned and Made in Australia.</p> <p>Roto Moulded in our fully automatic, gas compliant, Australian Standard Oven.</p> </div> <div class="toggleButton"></div> </div> 

Answer 1

use with (a=="0") instead of (a === 0)

Difference between == and === in JavaScript

 $(document).ready(function(){ $('.toggleTarget').hide(); $(".products-item") .click(function() { var a = $(this).data('number'); var toggleTargetId = $(this).attr('data-target'); var toggleTarget = $(document.getElementById(toggleTargetId)); if (a=="0") { toggleTarget.show("slow", "swing"); $(this).data('number','1'); } else { toggleTarget.hide("slow", "swing"); $(this).data('number','0'); } }); }); 

 .products-item { height: auto; width: 350px; display: inline-block; margin: 30px; padding-top: 20px; padding-left: 20px; padding-right: 20px; border: solid 2px #f5f5f5; border-radius: 10px; background-color: #f5f5f5; cursor: pointer; white-space: nowrap; vertical-align: top; transition: all 0.25s ease-in-out; } .products-item-label { width: 100px; height: auto; font-size: 12px; font-family: Comfortaa; display: block; position: relative; padding: 10px; left: -22px; color: #fff; background-color: #015c94; border-top-right-radius: 5px; border-bottom-right-radius: 5px; } .products-item-img { height: auto; width: auto; display: inline-block; border-radius: 190px; transition: all 0.25s ease-in-out; z-index: 10; } .products-item-text { width: auto; height: auto; bottom: 0px; left: 0px; margin: 10px; padding: 15px; display: inline-block; font-family: Comfortaa; font-size: 14px; text-align: center; border-radius: 5px; color: #333; background-color: transparent; transition: all 0.25s ease-in-out; } .products-item:hover { border: solid 2px #bae9ff; background-color: #bae9ff; } .products-item:hover .products-item-text { color: #015c94; border-radius: 5px; } .products-item:hover .products-item-details { color: #015c94; transition: color 0.25s ease-in-out; } .products-item-details { height: auto; width: 100%; padding-top: 0px; padding-bottom: 25px; font-size: 14px; text-align: center; } .products-item-details p { width: 350px; word-break: break-word; word-break: break-all; word-wrap: break-word; white-space: pre-wrap; } .products-item-details ul { width: 350px; margin: 0; display: inline-block; } .products-item-details li { width: 350px; padding-top: 5px; padding-bottom: 5px; text-align: center; overflow: hidden; word-wrap: break-word; white-space: pre-wrap; } .products-item-details-table { background-color: transparent; width: 100%; font-family: Comfortaa; font-size: 14px; padding-top: 20px; padding-bottom: 20px; table-layout: fixed; white-space: nowrap; /*border-collapse: collapse; REMOVE BORDER GAPPING */ } .products-item-details-table tr { width: 600px; } .products-item-details-table th { background-color: #ccc; color: #fff; font-size: 15px; font-weight: normal; width: auto; border: none; text-align: center; transition: all 0.25s ease-in-out; } .products-item-details-table td { background-color: #fff; width: 200px; text-align: left; transition: all 0.25s ease-in-out; } .products-item:hover .products-item-details-table th { background-color: #015c94; color: #fff; font-size: 15px; font-weight: normal; width: auto; border: none; text-align: center; } .products-item:hover .products-item-details-table td { background-color: #fff; color: #015c94; width: 200px; text-align: left; } .products-item-link { width: 100%; height: 20px; font-size: 16px; color: #ccc; text-decoration: none; cursor: pointer; transition: all 0.25s ease-in-out; } .products-item-link:hover { color: #666; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div id="info-9-btn" class="products-item" data-target="info-9" data-number="0"> <div class="products-item-label">NEW</div> <div class="products-item-img buoy-9"></div><br /> <div class="products-item-text">Round Buoy</div> <div id="info-9" class="products-item-details toggleTarget"> <ul style="list-style:none; padding:0; height:auto;"> <li>500mm x 500mm</li> <li>Foam Filled</li> <li>Can be engineered into a floating barrier to designate work zones, cordon off weir walls and other dangerous water areas.</li> <li>Can be fitted with a mooring tube and used as a mooring buoy.</li> <li>Can be used for any water application, where needed.</li> </ul> <p>Fully Owned and Made in Australia.</p> <p>Roto Moulded in our fully automatic, gas compliant, Australian Standard Oven.</p> </div> <div class="toggleButton"></div> </div> 

Answer 2

Change the === to == and it will work.

Alternatively, test a === 0 without the quotes, and then within the if/else where you change the value set it to 0 or 1 without the quotes.

The problem is that the .data() method is "smart": if the value in the data-number attribute can be converted to a numeric value then it returns a number rather than a string.

In your case you have data-number="0" , so .data('number') returns 0 , not "0" . But === tests for type equality, whereas == allows type coercion.

(Expand and run the following to see it work with == :)

 $(document).ready(function(){ $('.toggleTarget').hide(); $(".products-item") .click(function() { var a = $(this).data('number'); var toggleTargetId = $(this).attr('data-target'); var toggleTarget = $(document.getElementById(toggleTargetId)); if ( a == "0") { toggleTarget.show("slow", "swing"); $(this).data('number','1'); } else { toggleTarget.hide("slow", "swing"); $(this).data('number','0'); } }); }); 

 .products-item { height: auto; width: 350px; display: inline-block; margin: 30px; padding-top: 20px; padding-left: 20px; padding-right: 20px; border: solid 2px #f5f5f5; border-radius: 10px; background-color: #f5f5f5; cursor: pointer; white-space: nowrap; vertical-align: top; transition: all 0.25s ease-in-out; } .products-item-label { width: 100px; height: auto; font-size: 12px; font-family: Comfortaa; display: block; position: relative; padding: 10px; left: -22px; color: #fff; background-color: #015c94; border-top-right-radius: 5px; border-bottom-right-radius: 5px; } .products-item-img { height: auto; width: auto; display: inline-block; border-radius: 190px; transition: all 0.25s ease-in-out; z-index: 10; } .products-item-text { width: auto; height: auto; bottom: 0px; left: 0px; margin: 10px; padding: 15px; display: inline-block; font-family: Comfortaa; font-size: 14px; text-align: center; border-radius: 5px; color: #333; background-color: transparent; transition: all 0.25s ease-in-out; } .products-item:hover { border: solid 2px #bae9ff; background-color: #bae9ff; } .products-item:hover .products-item-text { color: #015c94; border-radius: 5px; } .products-item:hover .products-item-details { color: #015c94; transition: color 0.25s ease-in-out; } .products-item-details { height: auto; width: 100%; padding-top: 0px; padding-bottom: 25px; font-size: 14px; text-align: center; } .products-item-details p { width: 350px; word-break: break-word; word-break: break-all; word-wrap: break-word; white-space: pre-wrap; } .products-item-details ul { width: 350px; margin: 0; display: inline-block; } .products-item-details li { width: 350px; padding-top: 5px; padding-bottom: 5px; text-align: center; overflow: hidden; word-wrap: break-word; white-space: pre-wrap; } .products-item-details-table { background-color: transparent; width: 100%; font-family: Comfortaa; font-size: 14px; padding-top: 20px; padding-bottom: 20px; table-layout: fixed; white-space: nowrap; /*border-collapse: collapse; REMOVE BORDER GAPPING */ } .products-item-details-table tr { width: 600px; } .products-item-details-table th { background-color: #ccc; color: #fff; font-size: 15px; font-weight: normal; width: auto; border: none; text-align: center; transition: all 0.25s ease-in-out; } .products-item-details-table td { background-color: #fff; width: 200px; text-align: left; transition: all 0.25s ease-in-out; } .products-item:hover .products-item-details-table th { background-color: #015c94; color: #fff; font-size: 15px; font-weight: normal; width: auto; border: none; text-align: center; } .products-item:hover .products-item-details-table td { background-color: #fff; color: #015c94; width: 200px; text-align: left; } .products-item-link { width: 100%; height: 20px; font-size: 16px; color: #ccc; text-decoration: none; cursor: pointer; transition: all 0.25s ease-in-out; } .products-item-link:hover { color: #666; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div id="info-9-btn" class="products-item" data-target="info-9" data-number="0"> <div class="products-item-label">NEW</div> <div class="products-item-img buoy-9"></div><br /> <div class="products-item-text">Round Buoy</div> <div id="info-9" class="products-item-details toggleTarget"> <ul style="list-style:none; padding:0; height:auto;"> <li>500mm x 500mm</li> <li>Foam Filled</li> <li>Can be engineered into a floating barrier to designate work zones, cordon off weir walls and other dangerous water areas.</li> <li>Can be fitted with a mooring tube and used as a mooring buoy.</li> <li>Can be used for any water application, where needed.</li> </ul> <p>Fully Owned and Made in Australia.</p> <p>Roto Moulded in our fully automatic, gas compliant, Australian Standard Oven.</p> </div> <div class="toggleButton"></div> </div> 

Answer 3

It's because if ( a === "0") { is checking the types and values. A is a number and "0" is a string. Change it to a == "0".