function toggleSlide(element) {
// Check if the element is currently visible
if (element.style.display== '' || element.style.display== 'none') {
// If the element is not visible, slide it down
slideDown(element);
} else {
// If the element is visible, slide it up
slideUp(element);
}
}
function slideDown(element) {
// If the element is not visible, set the display and height properties
if (element.style.display !== 'block') {
element.style.display = 'block';
element.style.height = 0;
}
// Get the height of the element's content
const contentHeight = element.scrollHeight;
// Set a variable to keep track of the element's height
let currentHeight = 0;
// Start an animation loop
function animate() {
// Increase the element's height by 10px
currentHeight += 10;
// Update the element's height
element.style.height = `${currentHeight}px`;
// If the element's height is less than the content height, request another animation frame
if (currentHeight < contentHeight) {
requestAnimationFrame(animate);
}
}
// Start the animation
animate();
}
function slideUp(element) {
// Get the height of the element's content
const contentHeight = element.scrollHeight;
// Set a variable to keep track of the element's height
let currentHeight = contentHeight;
// Start an animation loop
function animate() {
// Decrease the element's height by 10px
currentHeight -= 10;
// Update the element's height
element.style.height = `${currentHeight}px`;
// If the element's height is greater than 0, request another animation frame
if (currentHeight > 0) {
requestAnimationFrame(animate);
} else {
// If the animation is complete, hide the element
element.style.display = 'none';
}
}
// Start the animation
animate();
}
.my-element {
background-color: #ddd;
/* Remove the transition */
overflow: hidden;
display:none;
}
<button onclick="toggleSlide(document.querySelector('.my-element'))">Slide Down</button>
<!-- Create the element that we will slide down -->
<div class="my-element">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et tellus in quam convallis dictum. Maecenas eget odio eget arcu accumsan porttitor. Ut elementum volutpat orci, sed tincidunt ipsum dictum at. Maecenas auctor tempus diam quis gravida. Aliquam at ultricies leo. Etiam euismod, nisi ac blandit placerat, diam turpis vestibulum diam, at ultricies turpis orci at elit. Mauris auctor dictum dolor, quis pretium nisi ultricies in. Aenean sollicitudin, quam non euismod porta, enim nisl laoreet velit, vel venenatis dui dui vel lacus. Aliquam erat volutpat. Donec et elit ut ipsum elementum volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent a nisi at est eleifend ullamcorper. Aenean porta, erat ac sagittis fermentum, leo magna tincidunt lectus, ac semper risus est et diam. Suspendisse auctor ipsum quam, id porta dui dictum sed. Vivamus ac diam non elit placerat iaculis vel at velit. Aliquam vel tincidunt velit. Duis imperdiet, dolor eu placerat luctus, ipsum quam laoreet dui, non suscipit nulla tellus et arcu. Donec dictum, massa non bibendum varius, leo urna condimentum diam, nec suscipit elit turpis vel turpis. Aenean ac nunc quis nisl tempus tincidunt a eu metus.</p>
</div>
