Can you provide an efficient way to toggle a CSS property value back and forth?
I’m currently trying to address the CSS transition 0/auto issue.
Here is my code snippet in JavaScript:
jQuery(document).ready(function($) {
var height = $('#menu').prop('scrollHeight');
$("#toggle").click(function() {
$("#menu").css('height', height);
});
})
Below is my CSS code:
#toggle {
float: right;
padding: 10px;
}
#menu {
display: block;
height: 0;
overflow: hidden;
float: none;
clear: both;
transition: height 1s ease 0.2s;
}
Currently, the code works for opening the menu but fails to close it.
Is there a method available to toggle a CSS property efficiently? I am looking for a single function that can switch the height property between 0 and the value retrieved using .prop('scrollHeight').
My goal is to keep the code as concise as possible without resorting to if statements to check the height property value.
For reference, .toggleClass is not viable in this specific scenario.