I am using iCheck on our website, but I am experiencing issues when I want to use a toggle (hide/show) DIV for displaying additional information about a product.
I tried numerous things, but all without success. I created a short version of the problem I am experiencing. See below.
jQuery('input').iCheck({
inheritID: true,
checkboxClass: 'icheckbox_square-blue',
radioClass: 'iradio_square-blue',
increaseArea: '20%'
});
function updateConfigurableOptions(i, billingCycle) {
jQuery.post("cart.php", 'a=cyclechange&ajax=1&i='+i+'&billingcycle='+billingCycle,
function(data) {
jQuery("#productConfigurableOptions").html(jQuery(data).find('#productConfigurableOptions').html());
jQuery('input').iCheck({
inheritID: true,
checkboxClass: 'icheckbox_square-blue',
radioClass: 'iradio_square-blue',
increaseArea: '20%'
});
}
);
recalctotals();
}
And
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://neverlands.org/icheck/icheck.min.js"></script>
<link href="http://neverlands.org/icheck/icheck/square/blue.css" rel="stylesheet"/>
<div class="product-configurable-options" id="productConfigurableOptions">
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label for="dont-target-this"></label>
<div class="webhostconfigopties">
<label for="dont-target-this">What kind of product do you want?</label>
</div><br>
<label class="" id="Product A - Normal / Standard product" name="Product A - Normal / Standard product">
<div style="position: relative;" class="iradio_square-blue">
<input style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; border: 0px none; opacity: 0;" name="configoption[5]" value="15" type="radio">
<ins style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; border: 0px none; opacity: 0;" class="iCheck-helper"></ins></div>
Product A - Normal / Standard product
</label>
<br />
<label class="" id="Product B - Special order +2 weeks time" name="Product B - Special order +2 weeks time">
<div style="position: relative;" class="iradio_square-blue">
<input style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; border: 0px none; opacity: 0;" name="configoption[5]" value="14" type="radio">
<ins style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; border: 0px none; opacity: 0;" class="iCheck-helper"></ins></div>
Product B - Special order +2 weeks time
</label>
</div>
</div>
<p><hr></p>
<div class="form-group">
<label for="dont-target-this"></label>
<div class="webhostconfigopties">
<label for="dont-target-this">Do you want something extra to it?</label>
</div><br>
<label class="" id="No, thank you. Nothing extra." name="No, thank you. Nothing extra.">
<div style="position: relative;" class="iradio_square-blue">
<input style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; border: 0px none; opacity: 0;" name="configoption[5]" value="15" type="radio">
<ins style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; border: 0px none; opacity: 0;" class="iCheck-helper"></ins></div>
No, thank you. Nothing extra.
</label>
<br />
<label class="" id="Yes, I want one extra option." name="Yes, I want one extra option.">
<div style="position: relative;" class="iradio_square-blue">
<input style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; border: 0px none; opacity: 0;" name="configoption[5]" value="14" type="radio">
<ins style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; border: 0px none; opacity: 0;" class="iCheck-helper"></ins></div>
Yes, I want one extra option.
</label>
<br />
<label class="" id="Yes, I want all possible extra options. This will take longer." name="Yes, I want all possible extra options. This will take longer.">
<div style="position: relative;" class="iradio_square-blue">
<input style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; border: 0px none; opacity: 0;" name="configoption[5]" value="14" type="radio">
<ins style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; border: 0px none; opacity: 0;" class="iCheck-helper"></ins></div>
Yes, I want all possible extra options. This will take longer.
</label>
</div>
</div>
</div>
</div>
<p></p>
<div id="addinfo-product-a" style="font-size:32px;color:red;">
Additional information in regards to product A
</div>
<div id="addinfo-product-b" style="font-size:32px;color:green;">
Additional information in regards to product B
</div>
<div id="addinfo-extraoption-b" style="font-size:32px;color:blue;">
Additional information in regards to extra option 2
</div>
<div id="addinfo-extraoption-c" style="font-size:32px;color:brown;">
Additional information in regards to extra option 3
</div>
The included JQuery is essential for iCheck, however I am starting to think that is also the cause of the problems. Maybe someone, who understand JQuery/JS can solve this problem?
The only thing I am trying to achieve is getting the corresponding DIV (with additional information about a product) being shown. I would prefer to use fadein / fadeout over toggle.
Anyways, I tried several things / solutions which were found on Google and on Stackoverflow. All of them work, EXCEPT when you use iCheck. I have no clue why that is. As soon as iCheck is in play, the DIV's won't show up (or go away).
Anyone knows a workaround to make a DIV show/hide in conjunction with iCheck.
I have a working JSFiddle here.
Capture the ifChecked and ifUnchecked events on the input elements and do the toggling of the extra information elements in the callback functions.
$('input').on('ifChecked', function(event){
var extraInformationId = $(this).closest('label').attr('data-extrainformationid');
if(extraInformationId != undefined) {
$('#' + extraInformationId).fadeIn(500);
}
});
Please, see the updated jsfiddle here.
P.S. I have used data-attributes in the label element to hold the id of the extra information element