Why does this jQuery not only not work, but break all the other jQuery?

Question

I am doing some "fancy" hiding (slideUp and slideDown) of elements on a Sharepoint WebPart.

I added another handler, though, for a button:

$(document).on("click", '[id$=btnAddFoapalRow]', function (e) {
    alert('you mashed the foapal button');
    if ($('[id$=foapalrow3]').css('display') == 'none') {
        $('[id$=foapalrow3]').slideDown();
    }
    else if ($(['id$ = foapalrow4]').css('display') == 'none') {
        $('[id$=foapalrow4]').slideDown();
    }
});

...but it not only fails to work (the HTMLTableRows do not display when the button is clicked), but the other jQuery (checkbox change event handlers, etc.) also fail to work after adding this code. Commenting it out, and the old code does work still.

Why would this code obliterate the whole shebang?

Answer 1

$(['id$ = foapalrow4]') <- seems like there is a typo here

it should be

$('[id$ = foapalrow4]')

your code after edit:

$(document).on("click", '[id$=btnAddFoapalRow]', function (e) {
    alert('you mashed the foapal button');
    if ($('[id$=foapalrow3]').css('display') == 'none') {
        $('[id$=foapalrow3]').slideDown();
    } else if ($('[id$ = foapalrow4]').css('display') == 'none') {
        $('[id$=foapalrow4]').slideDown();
    }
});