Streaming live at 10am (PST)

Changing z-index with interaction

Hi,

I have a slide in that slides in from the right to left.

  • When inactive it should be behind the navigation bar.
  • When active it should be in fron of the navigation bar.

Is there a way to do this with interactions?
If not what would be a correct way with some custom code?


Here is my public share link: share link
([how to access public share link][2])

No way to change CSS Z-Index and/or toggle classes by webflow interactions (Yet).

Related wishlist:
https://wishlist.webflow.com/ideas/WEBFLOW-I-214

In my opinion, it’s better (Very hard to debug class toggle - what happens is someone remove this class? “Chaos”). It’s better if webflow will add more options to animations (Like Z-index and so on).

For solution by code, you need to be more specific (On hover? click? Which element?).

The easiest way to by jquery toggleClass():
https://www.w3schools.com/jquery/html_toggleclass.asp

Minimal JS knowledge requires.

Hi,

to be more specific:

  • Slide in panel should change z-index on mouse click of a certain button.

hh more specific. In JS we use the elements class (or id) selectors.

Example:

<div class="box" id="red">red box</div>
<div class="box" id="blue"></div>

<button id="toggle">Change Z-index of red box</button>

CSS

.box{
  height: 100px;
  width: 100px;
}

#red{
  background :red;
  color: white;
}
#blue{
  background :blue;
  opacity: 0.8;
  position: relative;
  top: -20px;
}

.z_1000{
  position: relative;
  z-index: 1000;
  border: 5px orange solid;
}

JS (paste before body):

$( "#toggle" ).click(function() {
  $("#red").toggleClass( "z_1000" );
});

Example (click run):
https://www.w3schools.com/code/tryit.asp?filename=GD6G97ECML8K

z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky). https://www.w3schools.com/cssref/pr_pos_z-index.asp