Change div content on click of button

I am looking for a way to get the content in a div to change when a particular button is pressed.

I’ve put together a simple HTML page with the elements, can someone help me get this to work please?

http://smbnetworks.com.au/testdiv.html

Thanks heaps

How about creating 3 divs with absolute position and only making visible the one that is in focus instead of changing the content within a single div?

You can use HTML function of jquery to replace entire HTML content of a div - http://api.jquery.com/html/

There are few more ways in jQuery to do that.

KamilWaheed said

How about creating 3 divs with absolute position and only making visible the one that is in focus instead of changing the content within a single div?

+1

KamilWaheed said

How about creating 3 divs with absolute position and only making visible the one that is in focus instead of changing the content within a single div?

Thanks for the idea. If you view the source of the link I posted initially, that’s exactly what I have created.
My question is how do I do this? (making it visible and invisible)

cgruber said
KamilWaheed said

How about creating 3 divs with absolute position and only making visible the one that is in focus instead of changing the content within a single div?

Thanks for the idea. If you view the source of the link I posted initially, that’s exactly what I have created.
My question is how do I do this? (making it visible and invisible)

I would recommend you to use jQuery to achieve your target easily.

Here’s how to do this:

Add the following line inside head tag.


Put the 3 buttons inside a div like this and assign them ids :


Same thing for the pages, like this:

...
...
...

Then, add the following lines inside the body tag.


Create A Tabbed Interface Using jQuery

Hi KamilWaheed,

Thanks for the solution and I could imagine it can do the trick easily…! Unfortunately I cannot get it to work after following all the procedures you’ve provided…

When I click the buttons, nothing happen except the page refreshes…

This is the code:

Untitled Document .mydivshow {display:block;} .mydivhide {display:none;} .mybutton myred {color:rgba(251,24,2,1);} .mybutton myblue {color:rgba(44,0,235,1);}.mybutton mygreen {color: rgba(38,253,54,1);}
Div 1 Div 2 Div 3
...
...
...

I am very junior in terms of web design… Hope to hear from you soon!

Sweetee

KamilWaheed said
cgruber said
KamilWaheed said

How about creating 3 divs with absolute position and only making visible the one that is in focus instead of changing the content within a single div?

Thanks for the idea. If you view the source of the link I posted initially, that’s exactly what I have created.
My question is how do I do this? (making it visible and invisible)

I would recommend you to use jQuery to achieve your target easily.

Here’s how to do this:

Add the following line inside head tag.


Put the 3 buttons inside a div like this and assign them ids :


Same thing for the pages, like this:

...
...
...

Then, add the following lines inside the body tag.


With select option.

http://jsfiddle.net/spliter/5xVDq/

Thanks for the prompt reply!

What about if I want to replace the selection function with 5 buttons at the top?

SportTipsWorld said

With select option.

http://jsfiddle.net/spliter/5xVDq/

Hi SportTipsWorld,

the link you sent me works perfectly on the link, but when I transferred the code to my html file, I didn’t have much luck with it. I can do the selection, but nothing appears below whichever choice I select. What do you think might be the problem?

THANKS! on a very tight deadline here…