Custom Toggle CSS not working

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!

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/

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.

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);

• This reply was modified 8 years ago by Andrew Nevins.

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!

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);

• This reply was modified 8 years ago by Andrew Nevins.

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

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.

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!

I see, it looks updated now. Would you be able to try it again? I’m looking at your code here: https://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: https://www.oliveschoice.com/product/private-mandarin-course/

I don’t see the issue on either page, what am I looking for?