How to load one div into another.

Question

Hi,

I have a page with 10 different div contents in it. Based on my button click i want the 11th div to load content or just take a copy of div 1 to 10. I mean like on button1 it should load div 1 and on button 2 i will load div 2 etc. All my div 1 to 10 will be hidden and the 11th div alone will be visible.

I need this because of my below hierarchy.

-> Main Page (having the 10 div)

    ->inner div which is loaded by a ajax request.(this has 11th div and buttons)

Now on click of any button like 1 to 10 its respective divs is supposed to be loaded from the div in the main page. I would like to do this by java script or jquery. Please let me know any possibilities. Any kind of suggestions or solutions is appreciated.

Answer 1

Do you mean like this?

$("#mybutton1").click(
    $("#mydiv11").html($("#mydiv1").html());
)

Answer 2

If you have the buttons in some container (say a ul #buttons) and the divs in another container (say #panes) then you can do this:

var tabs = $('#buttons li button');
var panes = $('#panes').children('div');
tabs.click(function() {
    panes.hide()
    .eq(tabs.index(this)).show();
});

you can also do this with tabs UI http://jqueryui.com/demos/tabs/ .