CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Anake.me
Anake.me

Reputation: 467

OnClick Doesn't Work First Time

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>

Upvotes: 1

Views: 767

Answers (3)

nnnnnn
nnnnnn

Reputation: 150020

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>

Upvotes: 1

Jordan Soltman
Jordan Soltman

Reputation: 3883

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

Upvotes: 1

prasanth
prasanth

Reputation: 22490

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>

Upvotes: 1

Related Questions