jQuery stopPropagation() on more than one child object

Question

I have a list of songs, and when you click a song, a drop down menu appears and the song starts playing. I already have it setup so that if you click the drop down menu, it doesn't start pull itself back, you must still click on the original track details to pull it back up.

This example is here: http://shacktown.com

I would also like to attach this functionality to a different button. On a different page, though, I have the play/pause buttons right next to the song title, and I want to attach the stopPropagation() functionality to them as well.

Here is that page: http://shacktown.com/oldstage.php

The code that I'm using is here:

    $(document).ready(function(){
        $('.track').click(function(){
            if ( $(this).find('.trackPlayer').is(':hidden') ) {
                //removing color from prev. track
                $(".selectedTrack").removeClass("selectedTrack");
                $('.trackPlayer').slideUp();
                $(this).addClass("selectedTrack");
                $(this).find('.trackPlayer').slideDown();

            } else {
                $(".selectedTrack").removeClass("selectedTrack");
                $(this).find('.trackPlayer').slideUp();
            }
        }).find('.trackPlayer').click(function(e) {
            e.stopPropagation();
        });
    });

My question is, how do I attach another one of these .find()/stopPropagation() functions without having to create another $(document).ready(function(){}) block?

Clicking the pause/play/stop button should not cause the menu to drop down either, I would like the buttons to be treated as if they were not inside the .track parent at all, if possible.

Answer 1

You can provide multiple CSS selectors. In your case looks like .trackInfo div contains play/pause buttons so the code will be

.find('.trackPlayer, .trackInfo').click(function(e) {
    e.stopPropagation();
});

_{Cool music, btw!}