Custom Toggle CSS not working

This is your real HTML:

<p><label for="toggle-pr">Public Relations</label><br>
<input id="toggle-pr" checked="checked" name="toggle" type="checkbox"></p>
<div class="greyBack" "publicrelations"="">

So change the selectors to reflect the HTML & make sure you close your speech marks when writing classes.

Sorry, that’s my mistake when entering the HTML, the problem still stands, even with correct mark up.

There’s still a paragraph around it. Use a browser developer tool to help you find the markup.

In my WordPress Edit page, the exact html is:

<label for="toggle-pr">Public Relations</label>
<input id="toggle-pr" checked="checked" name="toggle" type="checkbox" />

<div class="greyBack" "publicRelations">
<h3>Gareth Coates Solicitors</h3>
 

<i>Chinese copy-writing for the Gareth Coates Solicitors website</i>
#publicrelations
</div>

Okay sorry, it has put the actual image there. Without the image:

<label for="toggle-pr">Public Relations</label>
<input id="toggle-pr" checked="checked" name="toggle" type="checkbox" />

<div class="greyBack" "publicRelations">
<h3>Gareth Coates Solicitors</h3>
 

<i>Chinese copy-writing for the Gareth Coates Solicitors website</i>
#publicrelations
</div>

Oh now I see what you mean, I checked Firebug and there is a paragraph around everything. However, I did not put this there, and it does not show up on my Edit page. Is this the source of my problem? Do you have any ideas for what I could do here? Thank you

Can you just change your CSS to reflect the markup?

My recommendation would be to do this via JavaScript. Install a Custom JavaScript plugin and, considering the jQuery library has been called, add this:

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.hide();
    } else {
        target.show();
    }
});

Sorry, I don’t understand what you mean by changing my CSS to reflect the markup? Is there something specific I need to change?

As for using jQuery, I was trying to avoid it because I do not know how to write it myself and therefore will not be able to adapt it to other toggles and divs, however I am happy to try using yours if you believe this is the best solution! Thank you very much for writing this snippet, am I right in my understanding that this piece will hide the div when the checkbox is checked?

So then if I wanted the div to be hidden when the checkbox was unchecked would this be correct?:

var $ = jQuery,
    trigger = $('#toggle-pr'), // I guess this is the toggle id?
    target = $('.publicrelations'); // And this is the div class I want to hide?

trigger.on('change', function() {
    var checkboxUnchecked = $(this).is(":not(:checked)");

    // if the checkbox has been unchecked
    if (checkboxUnchecked) {
        target.hide();
    } else {
        target.show();
    }
});

Thank you!

Can you install this plugin: https://www.ads-software.com/plugins/custom-css-js/

Then use this screenshot to guide for the “Options” to use: https://s.w.org/plugins/custom-css-js/screenshot-3.jpg?r=1538775

And instead of the code in that screenshot, add the above code.

It should work as long as you’ve closed off your class properly as per above.

Alright so I have installed the plugin and inserted the code like this:

I am sure I am missing something though, because it is still not working.

I changed the class in the screenshot above from .publicrelations to .publicRelations, and it didn’t make a difference.

I am using the code I tweaked in my last comment, perhaps there is a problem with it?

Oh and I changed the option from Internal to External, also no difference.

I changed the class in the screenshot above from .publicrelations to .publicRelations, and it didn’t make a difference.

Sorry that’s not what I meant. When I said to close off the quotes I meant to make sure you surround the class with speech marks in HTML.
You have this in the HTML:

<div class="greyBack" "publicRelations">

Which looks like WordPress is closing off your speech mark for you because you’ve left it open. The rendered HTML needs to look like this:

<div class="greyBack publicRelations">

In your first comment you said you have this:

<div class="publicRelations>

Which shows that you’re missing a speech mark after the letter ‘s’ in the word ‘publicRelations’.

Once you have that I can start to debug why the JS still doesn’t work, if it doesn’t work.