How to use two different transitions for toggling a class? - html

Question

So I have a custom expandable select. I want to apply two different transitions, one for the opening and one for the closing of the select.
.select-generic-2 {
max-height: 39px;
overflow: hidden;
z-index: 2;
transition: z-index 0s, max-height .25s ease-in-out 0s;
}
.select-generic-2.expanded {
z-index: 3;
max-height:1000px;
transition: max-height .25s ease-in-out 0s, z-index 0s .25s;
}
Here's the HTML structure of my custom select
<span class="select-generic-2 shadow-input">
<input type="radio" name="status" value="3" id="3">
<label for="3">text</label>
<input type="radio" name="status" value="4" id="4">
<label for="3">text2</label>
</span>
I am toggling the .expanded class with JS, but always the first transition property is executed. I want to change the z-index in such way to avoid overlapping with other elements with the same .select-generic-2 class (only one element has the .expanded class at a time). Any suggestion will be very welcome!
EDIT: I just realized that the problem is different and not related to the transitions. Just every single select has a default z-index value of 2 and when the .expanded class is removed the select boxes located under the collapsing are appearing over it because they have the same z-index (2) and are put over the collapsing (which is located above them in the code) by the browser.

Answer 1

Since you want to toggle the .expnaded class, use the class alone, then use your JS to add or remove the class on 'toggle'.
.select-generic-2 {max-height: 39px; overflow: hidden; z-index: 2; transition: z-index 0s, max-height .25s ease-in-out 0s;}
.expanded {z-index: 3; max-height:1000px; transition: max-height .25s ease-in-out 0s, z-index 0s .25s;}
Then on 'toggle', get the element from DOM and use add the class '.expanded'
To add class: https://www.w3schools.com/howto/howto_js_add_class.asp
To remove class: https://www.w3schools.com/howto/howto_js_remove_class.asp

Answer 2

Well guys I just added a new class called .collapsing which looks like this:
.select-generic-2.collapsing {
z-index: 1;
transition: z-index 0s 0s, max-height .25s ease-in-out 0s;
}
It is called when another select is being open and is removed when the expansion of the another select is complete.
The JS looks like this:
const select = document.querySelectorAll('.select-generic-2');
//this is inside the event listener
selected = this;
select.forEach(function(el){
if (el != selected){
el.classList.remove("expanded");
el.classList.add("collapsing");
setTimeout(function(){
el.classList.remove("collapsing");
}, 250);}
});
A little bit cheesy solution, but it works!