Easiest way to dyanmically load a DIV on button click?

Question

I have a relatively simple question here.

What I require is this; I need to have a page with 5 buttons at the top and a DIV beneath them (initially hidden). When a button is clicked, it loads content into the DIV (in the form of another DIV)
eg.

[Button 1] [Button 2] [Button 3] [Button 4] [Button 5] //5 buttons or links

<div id="content">
 // area for content to be loaded
</div>

<div id="content1">
//could be a table or image
</div>

<div id="content2">
//could be a table or image
</div>

<div id="content3">
//could be a table or image
</div>

<div id="content4">
//could be a table or image
</div>

<div id="content5">
//could be a table or image
</div>

In the above example, when the user loads the page they see 5 buttons. If they press button 5, it loads the "content5" DIV inside of the "content" DIV eg.

<div id="content">
 <div id="content5">
</div>
</div>

If another button is selected it loads it's content.

Can be achieved with jQuery or simple JavaScript.

Many thanks

Do you want the content from previous button clicks to remain inside `#content` ? — ocodo, Feb 03 '11 at 07:14

score 4 · Accepted Answer · answered Feb 03 '11 at 07:14

4

You need to bind a click handler on all of the buttons. Smart way in this particular example would be, to use the index of the elements to determine which div belongs to a button.

$('button').bind('click', function() {
    $('div#content').html($('div#content' + ($(this).index()+1)).html());
});

Demo: http://www.jsfiddle.net/8f8jt/

This will add an click event handler to all <button> nodes. On click, it looks for the index of the current clicked button (.index()^help) and uses this value to query for the accordant <div> elements id. Once found, use .html()^help to get and set the value.

answered Feb 03 '11 at 07:14

jAndy

231,737
57
305
359

i was thinking the same thing but you posted earlier...any way upvaoted for the answer – Vivek Feb 03 '11 at 07:19
That's great, functionality is perfect. However I need it modified to work with jquery-1.4.2.min.js. Any help appreciated, thanks a lot jAndy :) – Sam Feb 04 '11 at 00:14
A quick question, I'm assuming its fine to replace $('button') with a div class for the click action? Say $('btn-red')? – Sam Feb 04 '11 at 00:28
@Sam: the should work fine with 1.4.2 and yes, you can replace it by any selector you need. – jAndy Feb 04 '11 at 06:26
Hmm, can't see to be able to get it working with 1.4.2min. Copied and paste the exact html, referenced 1.4.2min in the header and copied the following into the header: – Sam Feb 06 '11 at 22:12
very elegant solution that involving the index of element – sys_debug Mar 30 '12 at 17:20

score 1 · Answer 2 · answered Feb 03 '11 at 07:19

1

You also can use jQueryUI tabs, but it requires additional script.

answered Feb 03 '11 at 07:19

Radek Benkel

8,278
3
32
41

JK. · Answer 3 · 2011-02-03T07:18:24.573

0

Try this

$('#button1').click(function() {
    $("#content").html(("#content1").html());
});

$('#button2').click(function() {
    $("#content").html(("#content2").html());
});

// etc

This way clears any existing content and copies the correct div into the main #content div.

edited Feb 03 '11 at 07:18

answered Feb 03 '11 at 07:09

JK.

21,477
35
135
214

I'm guessing that Sam doesn't want content from a previous button click to remain when you click another button. (however that's a pure assumption.) – ocodo Feb 03 '11 at 07:15
1

I was in the middle of editing and iteratively improving it :) After a few edits it was almost exactly the same as another answer, so I've stopped there. – JK. Feb 03 '11 at 07:24

Easiest way to dyanmically load a DIV on button click?

3 Answers3

Linked