1

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>
Carl Edwards
  • 13,826
  • 11
  • 57
  • 119
Anake.me
  • 467
  • 1
  • 6
  • 20

3 Answers3

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>
Community
  • 1
  • 1
prasanth
  • 22,145
  • 4
  • 29
  • 53
  • Wow, I never even noticed that. I guess I've looked at the code that much it never really stood out to me...so silly. Thank you for pinpointing my issue :) – Anake.me Dec 06 '16 at 02:37
1

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>
nnnnnn
  • 147,572
  • 30
  • 200
  • 241
1

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".

Jordan Soltman
  • 3,795
  • 17
  • 31