49 lines
2.2 KiB
JavaScript
49 lines
2.2 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function() {
|
|
const loginContainer = document.getElementById('login-container');
|
|
const signupContainer = document.getElementById('signup-container');
|
|
const toSignup = document.getElementById('to-signup');
|
|
const toLogin = document.getElementById('to-login');
|
|
|
|
function switchForm(hideContainer, showContainer) {
|
|
// Start transition for hiding the current form
|
|
hideContainer.style.maxHeight = hideContainer.scrollHeight + 'px'; // Set to full height
|
|
hideContainer.style.transition = 'max-height 0.75s ease'; // Set transition properties
|
|
hideContainer.style.maxHeight = '100px'; // Collapse height
|
|
|
|
// Hide the container after the transition
|
|
setTimeout(function() {
|
|
hideContainer.style.display = 'none'; // Completely remove from layout
|
|
hideContainer.style.maxHeight = '100px'; // Ensure it's collapsed
|
|
hideContainer.classList.remove('active');
|
|
|
|
// Prepare the new container
|
|
showContainer.style.display = 'block'; // Make it visible
|
|
showContainer.style.maxHeight = '100px'; // Start with collapsed height
|
|
showContainer.classList.add('active');
|
|
|
|
// Trigger reflow to apply the new height
|
|
showContainer.offsetHeight; // Trigger reflow
|
|
|
|
// Animate showing the new container
|
|
showContainer.style.transition = 'max-height 0.75s ease'; // Set transition properties
|
|
showContainer.style.maxHeight = showContainer.scrollHeight + 'px'; // Expand to full height
|
|
|
|
}, 1000); // Duration matches the max-height transition
|
|
}
|
|
|
|
toSignup.addEventListener('click', function(event) {
|
|
event.preventDefault();
|
|
switchForm(loginContainer, signupContainer);
|
|
});
|
|
|
|
toLogin.addEventListener('click', function(event) {
|
|
event.preventDefault();
|
|
switchForm(signupContainer, loginContainer);
|
|
});
|
|
|
|
// Optional: Show login form by default when the page loads
|
|
loginContainer.classList.add('active');
|
|
loginContainer.style.display = 'block'; // Ensure it's visible initially
|
|
loginContainer.style.maxHeight = loginContainer.scrollHeight + 'px'; // Expand to full height
|
|
});
|