Loading content into a div A while ago I used this code to load content into a div using jQuery load. I repeated the code for all the clicks to load different pages in the same div.

Is there any other way to do this?

$("#button1").click(function(){
    $('#div1').load('page1.php');
});


$("#button2").click(function(){
    $('#div1').load('page2.php');
});

&lt;div id="div1"&gt;      &lt;/div&gt;
Option 1:

If your buttons and pages are actually numbered like that, you can simply extract the number from the ID:

var $container = $('#div1');

$('[id^=button]').click(function() {
    $container.load('page' + this.id.match(/\d+$/)[0] + '.php');
});




Option 2:

If that was just an example, but in reality your naming scheme is not so predictable, you can keep an object map with all the appropriate URLs:

var $container = $('#div1'),
    map = {
        button1: 'page1',
        button2: 'page2'
        // and so on...
    };

$('[id^=button]').click(function() {
    $container.load( map[ this.id ] );
});




Option 3:

You could store the page URL in the HTML:

&lt;div id="button1" data-page="page1"&gt;&lt;/div&gt;
&lt;div id="button2" data-page="page2"&gt;&lt;/div&gt;


and then use that in your JavaScript:

var $container = $('#div1');

$('[id^=button]').click(function() {
    $container.load( $(this).attr('data-page') );
});


I personally dislike this method, since it puts behavioral stuff in your HTML.