Create URL with parameter for JQuery toggle status

Question

Inherited a theme and cannot contact the original developer. In the site, there are toggles so that users can switch between English and Spanish versions of the content. The toggle JS is included in a theme file under assets and read as such:

$('.js-spanish-toggle').on('click', function() {
    $(this)
        .find('button')
        .toggleClass('active');
    $(this)
        .parents('.spanish-container')
        .toggleClass('is-spanish');
});

Is there a way I can alter that to create URL parameters that can be used to automatically specify the Spanish version should be active? It always defaults to English. So for example, on a job listing, I could have the English version retain the normal URL path /careers/job-listing-1, but to direct and have the toggle state on Spanish, I would use /careers/job-listing#espanol.

Answer 1

You need to process 2 scenarios:

1. When page is loaded with #espanol hash
2. When button is clicked

    //check for #espanol hash and toggle on page load
    spanishByHash();

    //process toggle on click event
    $('.js-spanish-toggle').on('click', function() {
        hashToggle();
        spanishToggle();        
    });
    
    function spanishToggle() {
         $('.js-spanish-toggle')
             .find('button')
             .toggleClass('active');
         $('.js-spanish-toggle')
             .parents('.spanish-container')
             .toggleClass('is-spanish');
    }

    function hashToggle(){  
        if($(location).prop('hash') === '#espanol'){
            $(location).prop('hash','');
        }else{
            $(location).prop('hash','#espanol');
        }   
    }
    
    function spanishByHash(){
        if($(location).prop('hash') === '#espanol'){
            spanishToggle();
        }       
    }