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: * ```
``` * and not this: * ```
``` * 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](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/page/2/#post-8473223) * > 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/](https://api.jquery.com/multiple-selector/)_ * [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/page/2/#post-8473230) * 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](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/page/2/#post-8473265) * 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 9 years, 5 months ago by [Andrew Nevins](https://wordpress.org/support/users/anevins/). * 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/page/2/#post-8473461) * 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](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/page/2/#post-8474344) * 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 9 years, 5 months ago by [Andrew Nevins](https://wordpress.org/support/users/anevins/). * 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/page/2/#post-8488328) * 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](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/page/2/#post-8490947) * 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 ); ``` * 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/page/2/#post-8492495) * I don’t understand.. I’ve literally copied and pasted your code and it’s not working. * 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/page/2/#post-8492782) * I have temporarily disabled it because it is interfering with the rest of my site. * [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/page/2/#post-8493196) * 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. * 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/page/2/#post-8493233) * But this is everything in the box: * ![](https://i0.wp.com/www.oliveschoice.com/wp-content/uploads/2016/11/Screen- Shot-2016-11-29-at-13.56.02.png) * So I don’t know why there is somehow a mixture of old and new.. How confusing! * [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/page/2/#post-8493831) * 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](http://www.oliveschoice.com/wp-content/uploads/custom-css-js/1059.js?v=483) * 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/page/2/#post-8502076) * 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/](http://www.oliveschoice.com/product/private-mandarin-course/) * [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/page/2/#post-8502317) * I don’t see the issue on either page, what am I looking for? Viewing 15 replies - 16 through 30 (of 31 total) [←](https://wordpress.org/support/topic/custom-toggle-css-not-working/?output_format=md) [1](https://wordpress.org/support/topic/custom-toggle-css-not-working/?output_format=md) 2 [3](https://wordpress.org/support/topic/custom-toggle-css-not-working/page/3/?output_format=md) [→](https://wordpress.org/support/topic/custom-toggle-css-not-working/page/3/?output_format=md) The topic ‘Custom Toggle CSS not working’ is closed to new replies. ## Tags * [css](https://wordpress.org/support/topic-tag/css/) * [custom](https://wordpress.org/support/topic-tag/custom/) * [display](https://wordpress.org/support/topic-tag/display/) * [hidden](https://wordpress.org/support/topic-tag/hidden/) * [toggle](https://wordpress.org/support/topic-tag/toggle/) * [trouble-shooting](https://wordpress.org/support/topic-tag/trouble-shooting/) * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/) * 31 replies * 2 participants * Last reply from: [frejachristiana](https://wordpress.org/support/users/frejachristiana/) * Last activity: [9 years, 5 months ago](https://wordpress.org/support/topic/custom-toggle-css-not-working/page/3/#post-8502590) * Status: not resolved ## Topics ### Topics with no replies ### Non-support topics ### Resolved topics ### Unresolved topics ### All topics