Woah that was the whole reason it wasn’t working, because I wrote it like this:
<div class="greyBack" "publicRelations">
and not this:
<div class"greyBack publicRelations">
Thank you so much for your time and patience. Sorry it turned out to be such a trivial problem after all! I’m still not sure why the original CSS doesn’t work, but your JQuery is so no matter!
I just have one more question about adapting the snippet for more than one toggle/div pair. Could I just add another snippet like this or is there a more concise way to write this?
jQuery(document).ready(function( $ ){
var $ = jQuery,
trigger = $('#toggle-pr'),
target = $('.publicRelations');
trigger.on('change', function() {
var checkboxChecked = $(this).is(":checked");
// if the checkbox has been checked
if (checkboxChecked) {
target.show();
} else {
target.hide();
}
});
var $ = jQuery,
trigger = $('#toggle-bd'),
target = $('.businessDevelopment');
trigger.on('change', function() {
var checkboxChecked = $(this).is(":checked");
// if the checkbox has been checked
if (checkboxChecked) {
target.show();
} else {
target.hide();
}
});
});
Thank you!
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
I just have one more question about adapting the snippet for more than one toggle/div pair. Could I just add another snippet like this or is there a more concise way to write this?
In the code all you need to adapt is the top bit:
var $ = jQuery,
trigger = $('#toggle-pr'),
target = $('.publicRelations');
You can add another trigger by separating them with a comma, for example:
trigger = $('#toggle-pr, #another-id, .or-another-class'),
https://api.jquery.com/multiple-selector/
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Actually I’m wrong, once you add more than 1 trigger you’ll need to have a way of identifying which targets the triggers relate to.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
This is not the best way of doing it but yes you can essentially repeat the code. Try this:
var $ = jQuery,
trigger = $('#toggle-pr'),
target = $('.publicRelations'),
onChange = function () {
var checkboxChecked = $(this).is(":checked");
// if the checkbox has been checked
if (checkboxChecked) {
target.show();
} else {
target.hide();
}
};
trigger.on('change', onChange);
trigger = $('#toggle-bd');
target = $('.businessDevelopment');
trigger.on('change', onChange);
I tried your last snippet and it unfortunately doesn’t seem to work, it breaks the first toggle as well. I can only get the first toggle working again if I add a right rounded bracket between the curly bracket and semicolon, just before the part you added in your last comment.
I also tried repeating the first part and just changing the trigger and target but that also doesn’t work.
I’ve checked my HTML several times and looks correct to me. I’m afraid I don’t know what else to try!
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
I might not have made myself clear. You need to replace all of my above code with this:
var $ = jQuery,
trigger = $('#toggle-pr'),
target = $('.publicRelations'),
onChange = function () {
var checkboxChecked = $(this).is(":checked");
// if the checkbox has been checked
if (checkboxChecked) {
target.show();
} else {
target.hide();
}
};
trigger.on('change', onChange);
// New trigger
trigger = $('#toggle-bd');
// New target
target = $('.businessDevelopment');
trigger.on('change', onChange);
Hi there, sorry I haven’t replied to this sooner, I only work for this client Mon-Wed.
I have put in the code you suggested however the second toggle is still not working..
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
It still doesn’t look like all of my code above has been used.
To clarify, delete all of the code that I’ve previously recommended and instead use the code below:
var $ = jQuery,
trigger = $('#toggle-pr'),
target = $('.publicRelations'),
toggleSections = function () {
var checkboxChecked = $(this).is(":checked");
// if the checkbox has been checked
if (checkboxChecked) {
target.show();
} else {
target.hide();
}
};
trigger.on('change', toggleSections );
// New trigger
trigger = $('#toggle-bd');
// New target
target = $('.businessDevelopment');
trigger.on('change', toggleSections );
I don’t understand.. I’ve literally copied and pasted your code and it’s not working.
I have temporarily disabled it because it is interfering with the rest of my site.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
When I checked your site, the code appeared to be a mixture of my old and new code which caused an error in the JavaScript. The mixture of old and new is what causes the issue.
But this is everything in the box:
So I don’t know why there is somehow a mixture of old and new.. How confusing!
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
I see, it looks updated now. Would you be able to try it again? I’m looking at your code here: http://www.oliveschoice.com/wp-content/uploads/custom-css-js/1059.js?v=483
Okay so I reactivated the jQuery, neither of the toggles are working, but it’s also no longer interfering with this page: http://www.oliveschoice.com/product/private-mandarin-course/
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
I don’t see the issue on either page, what am I looking for?
