Create URL with parameter for JQuery toggle status

Question

Create URL with parameter for JQuery toggle status

lushiris02

2022年1月25日 22:00

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.

Topic jquery Wordpress parameter

Category Web

Oleksii · Accepted Answer · 2022年1月25日 22:00

You need to process 2 scenarios:

When page is loaded with #espanol hash
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();
        }       
    }

Create URL with parameter for JQuery toggle status

About