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