//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();
    }       
}

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();
        }       
    }