Contrôle des états basculés

Question

J'ai une question étrange.

J'ai créé deux carrés se chevauchant légèrement. Lorsque vous cliquez sur un carré, sa largeur s'étend via la bascule. Ce que je voudrais faire est de créer une fonction qui surveille si l'événement a été déclenché et si c'est le cas, de changer l'index z du second élément pour être au-dessus du premier. Est-ce possible?

JS Fiddle: https://jsfiddle.net/theodore_steiner/qvc7da0s/9/

<div id="square1"></div> 
<div id="square2"></div> 

CSS:

#square1 
{ 
height: 20px; 
width: 20px; 
background-color: blue; 
position: absolute; 
z-index: 3; 
transition: all .4s ease; 
} 

#square1.active 
{ 
width: 50px; 
} 


#square2 
{ 
height: 20px; 
width: 20px; 
background-color: green; 
position: absolute; 
z-index: 2; 
left: 25px; 
} 

JS;

var square1 = document.getElementById("square1"); 
var square2 = document.getElementById("square2"); 


square1.onclick = function pushLeft() 
    { 
    this.classList.toggle("active"); 
    }; 

Answer 1

Ajoutez cette règle CSS qui utilise le general sibling selector ~.

Si vous voulez seulement le frère ou la sœur, utilisez le adjacent sibling selectors +.

#square1.active ~ #square2 
{ 
    z-index: 5; 
} 

extrait de l'échantillon

var square1 = document.getElementById("square1"); 
 
var square2 = document.getElementById("square2"); 
 

 
square1.onclick = function pushLeft() { 
 
    this.classList.toggle("active"); 
 
};

#square1 { 
 
    height: 20px; 
 
    width: 20px; 
 
    background-color: blue; 
 
    position: absolute; 
 
    z-index: 3; 
 
    transition: all .4s ease; 
 
} 
 
#square1.active { 
 
    width: 50px; 
 
} 
 
#square1.active ~ #square2 { 
 
    z-index: 5; 
 
} 
 
#square2 { 
 
    height: 20px; 
 
    width: 20px; 
 
    background-color: green; 
 
    position: absolute; 
 
    z-index: 2; 
 
    left: 25px; 
 
}

<div id="square1"></div> 
 
<div id="square2"></div>