Question

I’d like to bind an event to a class, or any alternative to the redundant code I posted below. Any ideas?

thanks,
mna

(function(){
    $( "button", "body" ).button();
    var submenu=false;

    $( "#about" ).click(function() {
    $( "#content" ).fadeOut(1000);
    $( "#content" ).load('about.html');
    $( "#content" ).fadeIn(1000);
     });

    $( "#community" ).click(function() {
    $( "#content" ).fadeOut(1000);
     $( "#content" ).load('community.html');
     $( "#content" ).fadeIn(1000);
     });

     $( "#store" ).click(function() {
     $( "#content" ).fadeOut(1000);
     $( "#content" ).load('store.html');
     $( "#content" ).fadeIn(1000);
     });

    $( "#projects" ).click(function() {
    $( "#content" ).fadeOut(1000);
    $( "#content" ).load('projects.html');
    $( "#content" ).fadeIn(1000);
    });
});

Answer 1

Either use the multiple selector

$("#about, #community, #store, #projects").click(function() {
    $("#content").fadeOut(1000)
                 .load(this.id + '.html')
                 .fadeIn(1000);
});

or give these elements the same class and use

$('.classname').click(...);

Update:

I’ve seen that @pointy had a good point, but he deleted his answer: You probably want for fadeOut, load, fadeIn to occur one after another. Then you have to put them in callbacks:

$("#content").fadeOut(1000, function() {
   $(this).load(this.id + '.html', function() {
       $(this).fadeIn(1000);
   })
});

See their documentation for more information.