Adjusting the z-index of an element with a simple click

Question

Adjusting the z-index of an element with a simple click

Trying to tackle the challenge of adjusting the z-index of "content" relative to a clicked "menu-item". Progress has been made for menu items, but coming up short on the rest. In essence, clicking #m1 should set Z-Index 10 for #c1 and so forth.

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");
    });
});

Explore the working example here: http://jsfiddle.net/8a3vqy5v/

javascript jquery html css

Answer 1

Answer №1

There is no need to register multiple click events for the same element, as they function in the same way as a single binding would in your scenario.

To hide and show background content based on the menu index within the click event, you can refer to the code snippet below:

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 2

There is no need to register multiple click events for the same element, as they function in the same way as a single binding would in your scenario.

To hide and show background content based on the menu index within the click event, you can refer to the code snippet below:

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

Answer №2

To access the index of the clicked .menu-item element and choose the corresponding .content element based on that index, you can utilize the .eq() method:

Check out the Updated Example here

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");
});

If you encounter a strange transition issue with this approach, consider using the technique demonstrated in this example instead. This alternative method involves monitoring the transitionend event for smoother transitions.

Answer 4

To access the index of the clicked .menu-item element and choose the corresponding .content element based on that index, you can utilize the .eq() method:

Check out the Updated Example here

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");
});

If you encounter a strange transition issue with this approach, consider using the technique demonstrated in this example instead. This alternative method involves monitoring the transitionend event for smoother transitions.

Answer 5

Answer №3

For a scenario with a set number of elements (e.g. 4), you can streamline the process by creating individual rules for each element:

$('#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 prefer a universal rule that can be applied to any #mx - #cx pair, you could extract the clicked element's id as a string and manipulate it by replacing the initial letter with 'c'.

Answer 6

For a scenario with a set number of elements (e.g. 4), you can streamline the process by creating individual rules for each element:

$('#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 prefer a universal rule that can be applied to any #mx - #cx pair, you could extract the clicked element's id as a string and manipulate it by replacing the initial letter with 'c'.

Adjusting the z-index of an element with a simple click

Answer №1

Answer №2

Answer №3

Similar questions

An individual in a chat App's UserList experiencing issues with incorrect CSS values. Utilizing Jquery and socketio to troubleshoot the problem

What is the best way to shorten a tweet that goes over 140 characters?

The website encountered an error in loading with the error message "ENOTFOUND" in Cypress

What is the best way to extract a color box from a Bootstrap container?

Issue: The module 'xdl' cannot be located while executing the command "npm start" in React Native

Width of the `div` element is expanding

Remove a comment from the page without needing to refresh the entire

I find it curious that I need to include the bootstrap link in the body of the HTML file rather than in the head, unlike the bootstrap

Fetching an input in a Symfony form instantly using the make:form command

Pause file uploads, display modal popup, then resume uploading

Utilizing unique symbols to dynamically add form elements to an HTML page with jQuery's append method

Move your cursor over one container to see the impact on another

Change to the parent frame using webdriver

Dynamically update a dropdown menu with options based on the user's selection from a prior dropdown list using ajax and JSP Servlet

The mobile button bar on iPhone is shown when scrolling or jumping up to the anchor, but it doesn't actually scroll or jump to the

Tips for Resizing and Reviving Divs with jQuery

When I click the button, I would like the value of the button to be displayed in a textbox

Ways to merge a span element with a paragraph to function as one continuous block of text

How can I incorporate popups in React using mapbox-gl?

Can a websocket be used to communicate with a server that is not the same as the one hosting the html5 website?