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

Having trouble with updating PHP MySQL data using serializeArray?

My HTML page includes a display of temperature with two buttons - one for updating MySQL with the temperature setting and the other for toggling on/off data. Previously, everything was functioning correctly with the initial code: function myFunction() { ...

javascriptphpmysql

Pause the execution of an AJAX callback function after numerous AJAX requests

I have two separate Ajax calls in my code. Both of them have different callbacks that need to execute upon successful call. $.ajax({ type: 'POST', url: "url1", success: foo1 }); $.ajax({ type: 'POST', url: "url2", ...

javascriptajax

Tips on updating the text of a chosen item in a dropdown list using jQuery

In the following code snippet, the "my_theme" element represents a select list populated with directory listings. Upon triggering the "change" event, jQuery makes a request to determine if the selected folder contains a style.css file. The response will b ...

jquery

Enhancing elements in Bootstrap Studio with borders

After exploring the interface of bootstrap-studio, it appears that there is no direct option to add a border to an element. However, this can still be achieved either through custom css code or by utilizing the predefined boostrap border classes. You may r ...

htmlcsstwitter-bootstrapfrontendbootstrap-studio

What sets apart "React.useState setter" from "this.setState" when updating state?

After clicking on the button in AppFunctional, the component fails to update even though the state has changed. However, everything works fine in AppClass. In both cases, we are mutating the original state with "push", but I'm struggling to understan ...

javascriptreactjs

The .angular-cli.json file is causing issues with loading scripts

I have recently updated my .angular-cli.json file by adding new scripts in the following format: "apps": [ { "root": "src", "outDir": "dist", "assets": [ "assets", "favicon.ico" ], "index": "index.html ...

javascriptangulartwitter-bootstrapbootstrap-4

What could be causing my div to not appear when using jquery's show function?

I'm dealing with HTML code that looks like this: <div id="answerTypeSection" style="visibility: hidden"> <div class="row"> <div class="col-md-2">adfadfafasdfasdfas</div> </div> <label class="control-label"&g ...

javascriptjqueryhtmlcss

Convert TypeScript model to JSON while excluding properties with null values

When working with an Angular 4 App and a typescript model, I have defined a Person class as follows: export class Person{ fname:string, lname?:string } The 'lname' property in the model is optional. To populate the model in a component, I u ...

jqueryjsonangulartypescript

Error: Trouble encountered when sending a request to a webservice through ajax due to an unexpected token <

$(document).ready(function () { $("#submit").click(function (e) { e.preventDefault(); var userName = $("#username").val(); var password = $("#password").val(); authenticateUser(userName, password); }); }); functio ...

jqueryajaxjsonweb-services

Is it possible for a website to instruct a user's browser to save the entire page locally?

Is it possible for a (single-page) website to instruct a user's browser to save the entire page locally? To provide some background: I am running a website on a server that bills based on bandwidth usage. Since the content of the site remains mostly ...

htmlhttpwebnext.jsnuxt.js

Changing the height of a Bootstrap 3 row without using less variables

Can someone please explain how to adjust the .row width in Bootstrap so that the col grid still functions correctly, but certain .rows are tighter than default? Thank you. ...

htmlcsstwitter-bootstrap

Interacting with react-virtualized: accessing Grid's public functions

Trying to utilize the public method recomputeGridSize on a Grid component that I am currently rendering. I have set up the ref, but when attempting to call the method, it seems like it is not accessible. Outlined below is where the ref is established with ...

javascriptreactjsreact-virtualized

What's the Purpose of Using an Arrow Function Instead of Directly Returning a Value in a React Event Handler?

After skimming through various textbooks and blog posts, I've noticed that many explanations on event handlers in React are quite vague... For example, when instructed to write, onChange = {() => setValue(someValue)} onChange = {() => this.pro ...

javascriptreactjsreact-nativeevent-handling

In JavaScript, a variable's value can be assigned to another variable using the variable

I have a collection of predetermined variables. I dynamically assign a value to another variable, which ends up representing the name of one of the predefined variables. This allows me to easily determine which set variable to use on a particular section o ...

javascriptvariables

Does the class "col-sm-4" in bootstrap automatically become "col-sm-4 col-md-4 col-lg-4" if col-md and col-lg are not defined?

Is col-sm the default class applied for large screens if col-lg and col-md are not specified? ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is the best way to retrieve the "value" property of an <input> element in HTML?

Imagine there is an <input> element. When using jQuery to get the attributes of this element, I have written the following code: console.log($("#radio").attr("type")); console.log($("#radio").attr("value")); <script src="https://cdnjs.cloudflar ...

javascript

What methods can a controller use to verify the legitimacy of the scope?

I'm a bit perplexed when it comes to validation in angular. It seems like all of the validation is connected to the form. But what happens when the controller needs to ascertain if the model is valid or not? Here's an example I quickly whipped u ...

javascriptangularjsvalidation

Synchronizing information between different controllers using a service

After reading the discussion on this stackoverflow post, it seems like using services is the recommended way to transfer data between controllers. However, in my own testing on JSFiddle here, I encountered difficulties in detecting changes to my service w ...

javascriptangularjs

Encountered Error: Failed to inject additional dependencies

Attempting to manage my views using state (ui.router) has hit a roadblock. The addition of extra dependencies to the module is triggering the following error: Uncaught Error: [$injector:modulerr] This error is causing my states to break. var MyApp = a ...

javascriptangularjs

Getting an AJAX response from a CodeIgniter controller: A step-by-step guide

I have a scenario where a controller sends data to the model, and the model then inserts this data into a mysql database. My goal is to retrieve the last ID of the inserted row. I need this ID within my ajax function to update the table with relevant info ...

phpjqueryajaxcodeigniterresponse