Сейчас только на первой, как сделать чтобы на второй тоже было, но при этом чтобы они открывались, независимо друг от друга
animateDisplay = function(target, animationClass, displayType, timeout) {
// timeout should be longer than css transition
var doneTimedDisplay = false,
displaying = false;
target.addEventListener('transitionend', function() {
if (!target.classList.contains('show')) {
target.style.display = 'none';
}
doneTimedDisplay = true;
});
if (!target.style.display || target.style.display === 'none') {
displaying = true;
target.style.display = displayType;
} else {
displaying = false;
}
setTimeout(function() {
target.classList.toggle(animationClass);
doneTimedDisplay = false;
}, 10);
if (!displaying) {
setTimeout(function() {
// failsafe for transitioned not firing
if (!doneTimedDisplay) {
target.style.display = 'none';
}
doneTimedDisplay = true;
}, timeout);
}
};
document.querySelector('.mybutt')
.addEventListener('click', function() {
animateDisplay(document.querySelector('.content'), 'show', 'block', 300)
});
.box {
}
.content {
height: 100px;
width: 100px;
background: yellow;
opacity: 0;
display: none;
position: absolute;
transition: all 300ms ease;
left: 30px;
}
.content.show {
opacity: 1;
}
.mybutt {
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - display none transition</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<button class="mybutt">Hit me 1</button>
<div class="box">
<div class="content">Hi 1</div>
</div>
<button class="mybutt">Hit me 2</button>
<div class="box">
<div class="content">Hi 2</div>
</div>
<!-- partial -->
<script src="./script.js"></script>
</body>
</html>