Example shows ‘bigger’ class added to all paragraphs on a page, but CSS targets specific paragraph types. jQuery toggles the class and also makes the class persist when a visitor goes to another page.
NOT PERFECT: if you toggle the size down after toggling up, the bigger size still persists. To get back to original size, you have to close the browser tab and reopen the site in a new tab. Should be a matter of setting a cookie to read last setting, so I may update this after I figure that out. In the meantime, a very nice plugin, Accessibility Font Resizer, is fulfilling my immediate need.
HTML
<button class="textresize" onClick="bigParagraph()">±</button>
CSS (example does not include styling for the button)
.post-entry p.bigger,
.excerpt p.bigger { font-size: 1.4rem; line-height:1.8; }
.post-entry .pagepix p.bigger,
p.nav-previous.bigger,
p.nav-next.bigger { font-size:1.2rem; }
JQUERY
//RESIZE PARAGRAPHS
jQuery(function($) {
bigParagraph = function () {
$('p').toggleClass("bigger") //apply class to all paragraphs
sessionStorage.class = "bigger"; //store selection
}
});
jQuery(function($) { //persist variable on subsequent pages
$(document).ready(function(){
if(typeof(Storage) !== "undefined") {
$('p').addClass(sessionStorage.class);
}
});
}); 
