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?
 
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
 
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
 
clandestineAuthor Commented:
awesome. well done!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.