Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
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.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
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
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Can you just change your CSS to reflect the markup?
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
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!
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Can you install this plugin: https://wordpress.org/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.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
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">
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
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’.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Once you have that I can start to debug why the JS still doesn’t work, if it doesn’t work.
