<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="http://code.jquery.com/jquery-3.6.0.min.js"></script>
<title>Document</title>
<style type="text/css" media="screen">
#time {
background: #ddd;
width: 30px;
height: 80px;
white-space: nowrap;
overflow: hidden;
cursor: pointer;
}
#time p {
margin-left: 35px;
}
</style>
</head>
<body>
<div id="time">
<p>You can see this if you click</p>
</div>
<script type="text/javascript">
var count = 0;
$("#time").click(function() {
count++;
//even odd click detect
var isEven = function(someNumber) {
return (someNumber % 2 === 0) ? true : false;
};
// on odd clicks do this
if (isEven(count) === false) {
$(this).animate({
width: "260px"
}, 1500);
}
// on even clicks do this
else if (isEven(count) === true) {
$(this).animate({
width: "30px"
}, 1500);
}
});
</script>
</body>
</html>
