jquery - Overlaying divs including div selector -


inside container div have 4 divs wish overlay 1 visible @ time. each of these 4 divs same dimension - lets 200x200px. right of overlayed divs have 4 vertically aligned smaller divs not overlayed lets each 50 px high. these 4 vertically aligned divs act simple menu when clicked associated div of 4 overlaid divs left 1 displayed.

i trying find simplest solution ideally using jquery. have played around stuff knowledge of jquery isnt job.

any hints solution or method explore further appreciated. deployed part of wordpress theme if knows of plugin awesome suspect unlikely.

many thanks.

looking tabs form jquery ui? http://jqueryui.com/tabs/#vertical

working example @ jsfiddle

$(function() {     $( "#tabs" ).tabs().addclass( "ui-tabs-vertical ui-helper-clearfix" );     $( "#tabs li" ).removeclass( "ui-corner-top" ).addclass( "ui-corner-left" );   }); 

css

.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 { display:block; }   .ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active { 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;} 

Comments

Popular posts from this blog

java - Jmockit String final length method mocking Issue -

asp.net - Razor Page Hosted on IIS 6 Fails Every Morning -

c++ - wxwidget compiling on windows command prompt -