Home > DeveloperSection > Forums > Overlaying divs including div selector
Simons Hood
Simons Hood

Total Post:70

Posted on    May-09-2013 4:30 AM

 JQuery JQuery 

 1 Reply(s)
 1136  View(s)
Rate this:
Hi Mindstickians!

Inside a container div I have four divs that I wish to overlay so that only one is visible at any time. Each of these four divs is the same dimension - lets say 

200x200px. To the right of the overlayed divs I would like to have four vertically aligned smaller divs that are not overlayed lets say they are each 50 px high. 

These four vertically aligned divs will act as a simple menu so that when clicked the associated div of the four overlaid divs to the left is the one to be displayed.

I am trying to find the simplest solution to this ideally using jquery. I have played around with some stuff but my knowledge of jquery just isnt up to the job.

Any hints as to a solution or simply a method to explore further would be much appreciated. This is to be deployed as part of a wordpress theme so if anyone knows of 

a plugin that does exactly this then that would be awesome but I suspect unlikely.

please help me!

Thanks in advance! 


Total Post:604

Posted on    May-09-2013 8:05 AM

Hi Samuel!

Try as following

$(function() {
    $( "#tabs" ).tabs().addClass( "ui-tabs-vertical ui-helper-clearfix" );
    $( "#tabs li" ).removeClass( "ui-corner-top" ).addClass( "ui-corner-left" );


.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-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;}

I hope it resolve your problem! 

Don't want to miss updates? Please click the below button!

Follow MindStick