Jquery toggle() doesn't work with multiple classes

Question

I'm trying to show/hide specific elements based on checkbox values.

the "Show Guides" toggle switch works, but the "Show Padding" toggle switch doesn't.

I tried:

 $('.guide-padding').toggle();

    $('span.guide-padding').toggle();

    if($(this).prop("checked")) {
        $('.guide-padding').show();
    } else {
        $('.guide-padding').hide();
    }

    $('guide-padding.d-flex.justify-content-center.align-items- 
    center').toggle();

I found this answer to be informative. It didn't solve my problem, but I think I'm getting closer.

How can I select an element with multiple classes in jQuery?

Fiddle: https://jsfiddle.net/uz2gr1xj/2/

Answer 1

I figured it out!

$('#showPadding').change(function () {
    $('[name="guide-padding"]').toggleClass('d-flex');
    $('[name="guide-padding"]').toggle();
});