show/hide content via buttons

Hi Experts,

I have 3 image buttons on my page: Business. Network and Strategy
What I'm seeking is that when a user clicks on Business, the image then changes from orange to grey but at the same time the div content on left side changes to Business Content. So its a show/hide or switching layer visibility. The Network and Strategy content are also in the same position but obviously only visible when the user clicks on the relevant button.

I know I could do this quite easily in Dreamweaver but alas I no longer have the software. Please advise.

Thanks.
clandestineAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

StealthyDevCommented:
Hi, it can be achieved in many ways. Since you have selected JQuery tag, i suggest you tabs of JQuery UI.

Please follow this link:
http://jqueryui.com/demos/tabs/

or see the attached code from (jquery-ui-1.7.2.custom\development-bundle\demos\tabs)
can be downloaded at http://jqueryui.com/download
default.html
0
clandestineAuthor Commented:
Hi Senthurpandian,

I was thinking tabs, the only thing is those tabs are positioned horizontally where as my images are placed vertically and i see no option in the tabs to change the axis.
0
StealthyDevCommented:
0
StealthyDevCommented:
This is what they have done:


<style type="text/css">
/* Vertical Tabs
----------------------------------*/
.ui-tabs-vertical { width: 55em; }
.ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 12em; }
.ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; }
.ui-tabs-vertical .ui-tabs-nav li a { display:block; }
.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-selected { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px; }
.ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; width: 40em;}
</style> 

<script>
    $(document).ready(function() {
        $("#tabs").tabs().addClass('ui-tabs-vertical ui-helper-clearfix');
        $("#tabs li").removeClass('ui-corner-top').addClass('ui-corner-left');

    });
</script>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
clandestineAuthor Commented:
awesome. well done!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.