Navigate divs with varying z-index values

I want to change the z-index of 3 divs by toggling them using jQuery, but I'm not sure how to do it. What I want is to click a button that relates to a specific div and increase the z-index of that div so the content inside it is shown. Currently, all three divs are layered on top of each other.

.toggle-content {
  position: absolute;
  float: left;
  width: 50px;
  height: 50px;
}
<div id="content">
  <div id="toggle">
    <a href="#">
      <div class="button" data-content="#1">1</div>
    </a>
    <a href="#">
      <div class="button" data-content="#2">2</div>
    </a>
    <a href="#">
      <div class="button" data-content="#3">3</div>
    </a>
  </div>
  <div id="togglecontent">
    <div id="1" class="toggle-content" style="z-index:9;">1</div>
    <div id="2" class="toggle-content" style="z-index:8;">2</div>
    <div id="3" class="toggle-content" style="z-index:7;">3</div>
  </div>
</div>

Therefore, I am interested in knowing how to simply click a button and have the corresponding div update its z-index to the highest value.

I would really appreciate any assistance with this!

javascriptjqueryhtmlcss

Answer №1

You have the option to implement something similar to the following:

$('#toggle').on('click', 'a', function(e) {
   e.preventDefault();
   $( $(this).children().data('content') ).css('zIndex', 5).siblings().css('zIndex', 4);
});
.toggle-content {
  position: absolute;
  float: left;
  width: 50px;
  height: 50px;
  background: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
  <div id="toggle">
    <a href="#">
      <div class="button" data-content="#1">1</div>
    </a>
    <a href="#">
      <div class="button" data-content="#2">2</div>
    </a>
    <a href="#">
      <div class="button" data-content="#3">3</div>
    </a>
  </div>
  <div id="togglecontent">
    <div id="1" class="toggle-content" style="z-index:9;">1</div>
    <div id="2" class="toggle-content" style="z-index:8;">2</div>
    <div id="3" class="toggle-content" style="z-index:7;">3</div>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I retrieve my array state in a different router page using VUEJS and VUEX?

I have created a page with two routes - one for the home page and another for the configuration where users can decide what content should be displayed on that container. In the configuration panel, I was able to retrieve input values and stored them in my ...

javascriptvue.jsvuexvuetify.jsvue-router

Error occurred while attempting to execute the method

Here's a MongoDB Mongoose query we're dealing with: sampleSchema.find({ $where: "expired <= " + (new Date()) }) .limit(9) // Problems may arise from here .sort({ postedDate: -1 }) .then((docs) => { console.log(&apos ...

javascriptjsonnode.jsmongodbmongoose

What is the rationale behind transmitting JSON data within HTML in Next.js's static site generation (

When a webpage is loading, the entire HTML document is sent, whereas in client-side routing, only the JSON file and JS chunk are sent. But why does the HTML file filled with data need to contain JSON data too? Is it really necessary since we already have ...

htmlnext.jsstatic-site-generation

Transitioning to Vue 3: [Vue warning]: Prop already has a computed property named "actions"

Currently in the process of migrating a Vue 2 application to Vue 3, I've encountered an issue where I am frequently seeing this warning: [Vue warn]: Computed property "actions" is already defined in Props. This warning pops up in various c ...

javascriptvue.jsvuejs3

Encountering an issue with core.js:15723 showing ERROR TypeError: Unable to access property 'toLowerCase' of an undefined value while using Angular 7

Below, I have provided my code which utilizes the lazyLoading Module. Please review my code and identify any errors. Currently facing TypeError: Cannot read property 'toLowerCase' of undefined in Angular 7. Model Class: export class C_data { ...

javascriptangulartypescriptrxjsobservable

In this JavaScript tool for counting characters, every carriage return is counted as two characters

Hello there! I have created a character counter in JavaScript that looks like this: <textarea class="SmsText" id="txttemplate" maxlength="160" /> <span id="charsCount">160</span></strong><span>character(s) left</span> ...

javascriptasp.net-mvc-4razor

Is it possible to index elements starting from 1 in Jquery?

Is there a way to make the index element start from 1 without having to use "if(index ===0) return true;"? $( 'h3' ).each(function( index ) { ...do things... } Many loops typically begin at 0 because of their association with arrays, wh ...

jquery

Display only the static placeholder in Angular 2 multi-select feature

My experience with angular 4 is fairly new and I've recently delved into using the angular multiselect feature with the npm package available here. I've managed to successfully configure it, as well as capture selected and deselected items/event ...

cssangularnpmresponsive-design

Loop through an array of elements in JavaScript and retrieve the element with the largest pixel size

I am facing a challenge with elements positioned absolutely on a web page. My goal is to iterate over these elements and identify the one with the highest top value. I attempted two different approaches: const elems = document.querySelectorAll('.ind ...

javascriptarrays

Surprising automatic scrolling upon pressing the keydown button in Bootstrap

My webpage appears normal with the Bootstrap framework, but whenever I press the down key, the screen scrolls down and displays unexpected white space due to reaching the end of the background-image sized at 1798px * 1080px. Please refer to the image: He ...

javascriptjqueryhtmlcsstwitter-bootstrap

I'm looking for a way to dynamically update Laravel pagination records based on the selected option value for the number of items per page using Laravel and

I am working on creating a custom filter system using a select option menu and pagination with AJAX. The select option allows users to choose between displaying 10, 15, 20, or 25 products per page while updating the Laravel default pagination dynamically ...

phpjqueryajaxlaravelpagination

Tips for generating AJAX requests directly from HTML documents

Hey there! I'm fairly new to JavaScript and have a question that might seem silly to some. How exactly can I invoke a function from a Coffeescript file within my HTML code? I'd like to give users the option to choose the language in which they v ...

javascriptjqueryhtmlajaxcoffeescript

Is using JSONP the only choice for an XML API in a jQuery ajax call?

Currently, I am working in jQuery and attempting to make an Ajax call to query an external XML API located on a different domain. Unfortunately, my requests are being blocked due to the cross-domain restrictions. I am curious about alternative options fo ...

jqueryajaxxmlhttprequestjsonp

Displaying the votes through an advanced system called Ajax voting system

I've encountered a challenge while using an ajax voting system in my project. The issue is that I'm utilizing a div with an id to showcase the votes, but whenever someone clicks on vote up or down in any of the posts (which are generated through ...

javascriptjqueryajax

Is it possible to load the response from the $.post function, which contains GIF content, into a JavaScript Image object

How can I preload an image that the server only returns on a POST request? I want to load the image before displaying it. How can I store the result in a JavaScript object? $.post('image.php', {params: complexParamsObject}, function(result) { ...

javascriptjqueryajaximagedownload

"Enhance your website with a dynamic hover effect and striking letter spacing in

In the div below, there is a span with the following code: <div class="mission-button"><span class="mission">view our mission</span></div> Accompanied by this CSS: .mission-button::before { content:'&ap ...

htmlcss

Is there a way to assign innerHTML values to table cells using PHP?

I'm currently building a website that relies on a database to store information. I have created an array to hold the values retrieved from the database, and now I need to populate a table with these values. Each cell in the table has a numerical ID ra ...

javascriptphphtml

Exploring jQuery selectors with a looping mechanism to trigger click events

Trying to figure out how to loop through numerical selector values in JQuery while utilizing an onClick event handler. Is this a chicken-or-egg situation or perhaps a closure issue? Any guidance would be appreciated. $("#q01").click(function() { cle ...

jqueryeventsloopsclickhandler

Using the spread operator in ES6 allows for arguments to be placed in a non-con

When working in nodeJS, my code looks like this: path = 'public/MIN-1234'; path = path.split('/'); return path.join( process.cwd(), ...path); I was expecting to get: c:\CODE\public/MIN-1234 but instead, I got: `‌publ ...

javascriptnode.jsecmascript-6

Ensure exclusive access to variables for sequential updates in jQuery or JavaScript

I am currently developing a series of small functions in jQuery aimed at tracking how long it takes for a user to complete a form. The form consists of various input types and 'continue' buttons located within the form itself. Below are some sa ...

javascriptjquery