Title: Custom Toggle CSS not working
Last modified: November 22, 2016
---
# Custom Toggle CSS not working
* [frejachristiana](https://wordpress.org/support/users/frejachristiana/)
* (@frejachristiana)
* [9 years, 5 months ago](https://wordpress.org/support/topic/custom-toggle-css-not-working/)
* I have designed a custom toggle feature that is currently not working on this
page: [http://www.oliveschoice.com/portfolio/](http://www.oliveschoice.com/portfolio/).
When the toggle at the top is unchecked, the first div (Gareth Coates Solicitors)
should disappear. The toggle works outside of the website, I have also contacted
the theme developers and they have assured me the theme is not interfering with
this feature. I have tried disabling all my plugins to no effect. I am not sure
what else to try, perhaps someone will be able to help me!
* HTML:
* ```
```
* So change the selectors to reflect the HTML & make sure you close your speech
marks when writing classes.
* Thread Starter [frejachristiana](https://wordpress.org/support/users/frejachristiana/)
* (@frejachristiana)
* [9 years, 5 months ago](https://wordpress.org/support/topic/custom-toggle-css-not-working/#post-8468957)
* Sorry, that’s my mistake when entering the HTML, the problem still stands, even
with correct mark up.
* [Andrew Nevins](https://wordpress.org/support/users/anevins/)
* (@anevins)
* WCLDN 2018 Contributor | Volunteer support
* [9 years, 5 months ago](https://wordpress.org/support/topic/custom-toggle-css-not-working/#post-8468979)
* There’s still a paragraph around it. Use a browser developer tool to help you
find the markup.
* Thread Starter [frejachristiana](https://wordpress.org/support/users/frejachristiana/)
* (@frejachristiana)
* [9 years, 5 months ago](https://wordpress.org/support/topic/custom-toggle-css-not-working/#post-8469040)
* In my WordPress Edit page, the exact html is:
* ```
Gareth Coates Solicitors
Chinese copy-writing for the Gareth Coates Solicitors website
#publicrelations
```
* Thread Starter [frejachristiana](https://wordpress.org/support/users/frejachristiana/)
* (@frejachristiana)
* [9 years, 5 months ago](https://wordpress.org/support/topic/custom-toggle-css-not-working/#post-8469041)
* Okay sorry, it has put the actual image there. Without the image:
* ```
Gareth Coates Solicitors
Chinese copy-writing for the Gareth Coates Solicitors website
#publicrelations
```
* Thread Starter [frejachristiana](https://wordpress.org/support/users/frejachristiana/)
* (@frejachristiana)
* [9 years, 5 months ago](https://wordpress.org/support/topic/custom-toggle-css-not-working/#post-8469050)
* 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](https://wordpress.org/support/users/anevins/)
* (@anevins)
* WCLDN 2018 Contributor | Volunteer support
* [9 years, 5 months ago](https://wordpress.org/support/topic/custom-toggle-css-not-working/#post-8469133)
* Can you just change your CSS to reflect the markup?
* [Andrew Nevins](https://wordpress.org/support/users/anevins/)
* (@anevins)
* WCLDN 2018 Contributor | Volunteer support
* [9 years, 5 months ago](https://wordpress.org/support/topic/custom-toggle-css-not-working/#post-8469157)
* 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();
}
});
```
* Thread Starter [frejachristiana](https://wordpress.org/support/users/frejachristiana/)
* (@frejachristiana)
* [9 years, 5 months ago](https://wordpress.org/support/topic/custom-toggle-css-not-working/#post-8469324)
* 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](https://wordpress.org/support/users/anevins/)
* (@anevins)
* WCLDN 2018 Contributor | Volunteer support
* [9 years, 5 months ago](https://wordpress.org/support/topic/custom-toggle-css-not-working/#post-8470944)
* Can you install this plugin: [https://wordpress.org/plugins/custom-css-js/](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](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](https://wordpress.org/support/topic/custom-toggle-css-not-working/#post-8468708).
* Thread Starter [frejachristiana](https://wordpress.org/support/users/frejachristiana/)
* (@frejachristiana)
* [9 years, 5 months ago](https://wordpress.org/support/topic/custom-toggle-css-not-working/#post-8472575)
* 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?
* Thread Starter [frejachristiana](https://wordpress.org/support/users/frejachristiana/)
* (@frejachristiana)
* [9 years, 5 months ago](https://wordpress.org/support/topic/custom-toggle-css-not-working/#post-8472578)
* Oh and I changed the option from Internal to External, also no difference.
* [Andrew Nevins](https://wordpress.org/support/users/anevins/)
* (@anevins)
* WCLDN 2018 Contributor | Volunteer support
* [9 years, 5 months ago](https://wordpress.org/support/topic/custom-toggle-css-not-working/#post-8473012)
* > 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:
* ```
```
* 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:
* ```
```
* [Andrew Nevins](https://wordpress.org/support/users/anevins/)
* (@anevins)
* WCLDN 2018 Contributor | Volunteer support
* [9 years, 5 months ago](https://wordpress.org/support/topic/custom-toggle-css-not-working/#post-8473018)
* In your first comment you said you have this:
* ```