Overlaying divs including div selector

Question

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.

Many thanks.

Answer 1

Looking for TABS form Jquery UI? http://jqueryui.com/tabs/#vertical

Working example at 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 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;}

Answer 2

Unfortunately I do not want to use the ui. Here is something a bit more explicit that I would like to get working. The four overlaid divs (class 'feature') are manipulated by .hide and .show based on the associated menu div being clicked. The click selection works (checked with alerts) but the divs do not show or hide correctly. Any input as to what is wrong and possibly how to optimise the repetitive show/hide code much appreciated.

Many thanks.

    <div id="container">
    <div id="feature1" class="feature">feature 1</div>
    <div id="menu_feature1" class="menu_feature">menu 1</div>
    <div id="feature2" class="feature">feature 2</div>
    <div id="menu_feature2" class="menu_feature">menu 2</div>
    <div id="feature3" class="feature">feature 3</div>
    <div id="menu_feature3" class="menu_feature">menu 3</div>
    <div id="feature4" class="feature">feature 4</div>
    <div id="menu_feature4" class="menu_feature">menu 4</div>
</div>

<script>
    $("#menu_feature1").click(function() {  $('.feature').hide; $('#feature1').show; });
    $("#menu_feature2").click(function() {  $('.feature').hide; $('#feature2').show; });
    $("#menu_feature3").click(function() {  $('.feature').hide; $('#feature3').show; });
    $("#menu_feature4").click(function() {  $('.feature').hide; $('#feature4').show; });
</script>

Answer 3

Please correct the Syntax of hide and show.This will work seamlessly

add $('.feature').hide(); before the click event so that all the overlays are hidden initially. JS Fiddle Output: http://jsfiddle.net/saiprasad2k6/8tEna/14/