Make DIV z-index change on click and back to original with JS

Question

I have a certain DIV i want to change the z-index of when being clicked on. How can i make it a loop, so when unclicked/ clicked again the div goes back to its original z-index.

I already have this JS that changes the z-index, how to complete it so it goes back?

$(function(){
  $("#offcanvas-menuright").click(function(){
     $(this).css("z-index", 105);
  });
});

Answer 1

You can do this with help of css

JS:

$(function(){
  $("#offcanvas-menuright").click(function(){
     $(this).toggleClass("foo");
  });
});

CSS:

.foo{
z-index:105
}