Toggle Login and Register forms on the Moore Wright Group Woocommerce page.

login_register.js

/**
 * Add this JavaScript early in the DOM so it will execute when the page loads.
 * You can use something like the "Simple Custom CSS and JS" plugin:
 * https://wordpress.org/plugins/custom-css-js/#
 * 
 * If you want to test it, execute the code inside the "DOMContentLoaded" 
 * function in the developer console on the login|register page. 
 */

document.addEventListener("DOMContentLoaded", function (event) {
    // Select Elements
    const formParent = document.querySelector('#customer_login');
    const loginEl = document.querySelector('#customer_login .col-1');
    const registerEl = document.querySelector('#customer_login .col-2');
    const formToggleButton = document.createElement('button');

    // Style the toggle button
    formToggleButton.classList.add('button');
    formToggleButton.style.fontSize = '18px';
    formToggleButton.style.padding = '0 24px';
    formToggleButton.style.margin = '0 4px -40px auto';
    formToggleButton.style.backgroundColor = '#eaeaea';
    formToggleButton.style.color = '#1a491d';
    formToggleButton.style.textDecoration = 'underline';


    let showForm = 'initializing'; // Correct values: 'login' or 'register'

    const showRegister = () => {
        // Button display text for register form
        formToggleButton.innerText = 'Already registered? Login here.';
        loginEl.style.display = 'none';
        registerEl.style.display = 'block';
        showForm = 'register';
    }

    const showLogin = () => {
        // Button display text for login form
        formToggleButton.innerText = 'Not signed up yet? Register here.';
        loginEl.style.display = 'block';
        registerEl.style.display = 'none';
        showForm = 'login';
    }

    const toggleForms = () => {
        if (showForm === 'login') {
            showRegister();
        } else {
            showLogin();
        }
    }

    // Listen to click events
    formToggleButton.addEventListener('click', () => {
        toggleForms();
    });

    // Initiate button with first toggle
    toggleForms();

    // Add button to top of login/register form
    formParent.prepend(formToggleButton);
});