Changing Z-Index Of Another Element On Click

Question

in the code below I am trying to figure out how can I change "content"s z-index relatively to clicked "menu-item". I managed how to do this for menu items, but cannot find solution for the rest. In simple words I need to click #m1 and set Z-Index 10 for #c1 and so on.

HTML

<div id="content" class="container">
    <div id="c1" class="content">content1</div>
    <div id="c2" class="content">content2</div>
    <div id="c3" class="content">content3</div>
    <div id="c4" class="content">content4</div>
</div>
<div id="menu" class="container">
    <div id="m1" class="menu-item"></div>
    <div id="m2" class="menu-item"></div>
    <div id="m3" class="menu-item"></div>
    <div id="m4" class="menu-item"></div>
</div>

CSS

/*global*/
.container{
    position: absolute;
    width: 300px;
    height: 100px;
}
/*content*/
.content{
    position: absolute;
    height: 100%;
    width: 75%;
    right: 0;
    background: #354458;
    text-align: center;
    color: #fff;
    line-height: 95px;
}
/*menu*/
.menu-item{
    position: absolute;
    width: 25%;
    height: 100%;
    background: green;
    cursor: pointer;
    transition: left 200ms ease-in-out;

}
.menu-item.closed{
    left: 0 !important;
}
#m1{
    left:0;
    background: #DB3340;

}
#m2{
    left: 25%; 
    background: #E8B71A;
}
#m3{
    left: 50%; 
    background: #1FDA9A;
}
#m4{
    left: 75%; 
    background: #28ABE3;
}

JQuery

$(document).ready(function(){
    var menu = $('.menu-item');

    menu.click(function(){
        $(this).siblings(menu).css('z-index', "initial");
        $(this).css('z-index', 11);
    });
    menu.click(function(){
        menu.toggleClass("closed");
    });
});

Working example: http://jsfiddle.net/8a3vqy5v/

Answer 1

You could get the index of the clicked .menu-item element and then select the corresponding .content element using the index with the .eq() method :

Updated Example

var $menu = $('.menu-item');

$menu.click(function() {
  $(this).css('z-index', 11).siblings($menu).add('.content').css('z-index', '');

  if (!$(this).hasClass('closed')) {
    $('.content').eq($(this).index()).css('z-index', 10);
  }
  $menu.toggleClass("closed");
});

But since that creates a weird transition bug, you could use the code from this example instead. It essentially listens to the transitionend event.

Answer 2

No need to register multiple click events for the same element, they serve for your case same as a single binding.

You can hide and show the background content based on the menu index as follows within the click event, you can check the code snippet for full code:

var index = $(this).index();
$('.content').hide();
$('.content').eq(index).show();

Snippet :

 $(document).ready(function(){ var menu = $('.menu-item'); menu.click(function(){ $(this).siblings(menu).css('z-index', "initial"); $(this).css('z-index', 11); menu.toggleClass("closed"); var index = $(this).index(); $('.content').hide(); $('.content').eq(index).show(); }); }); 

 /*global*/ .container{ position: absolute; width: 300px; height: 100px; } /*content*/ .content{ position: absolute; height: 100%; width: 75%; right: 0; background: #354458; text-align: center; color: #fff; line-height: 95px; } /*menu*/ .menu-item{ position: absolute; width: 25%; height: 100%; background: green; cursor: pointer; transition: left 200ms ease-in-out; } .menu-item.closed{ left: 0 !important; } #m1{ left:0; background: #DB3340; } #m2{ left: 25%; background: #E8B71A; } #m3{ left: 50%; background: #1FDA9A; } #m4{ left: 75%; background: #28ABE3; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="content" class="container"> <div id="c1" class="content">content1</div> <div id="c2" class="content">content2</div> <div id="c3" class="content">content3</div> <div id="c4" class="content">content4</div> </div> <div id="menu" class="container"> <div id="m1" class="menu-item"></div> <div id="m2" class="menu-item"></div> <div id="m3" class="menu-item"></div> <div id="m4" class="menu-item"></div> </div> 

Answer 3

if there is a fixed number of elements (ie: 4) you could simply throw 4 rules, one for each :

$('#m1').click(function() {
    $('.content').css('z-index', '');
    $('#c1').css('z-index', '11');
});
$('#m2').click(function() {
    $('.content').css('z-index', '');
    $('#c2').css('z-index', '11');
});
$('#m3').click(function() {
    $('.content').css('z-index', '');
    $('#c3').css('z-index', '11');
});
$('#m4').click(function() {
    $('.content').css('z-index', '');
    $('#c4').css('z-index', '11');
});

if you want a single rule that would apply to any #mx - #cx couple, you could also try to get the id of the element clicked as a string and manipulate the string in order to replace the first letter with a 'c'