$(document).ready(function(){ // changer links when clicked $("a.changer").click(function(){ //set the div with class mainText as a var called $mainText var $mainText = $('#page-main-body-item-display p'); // set the current font size of .mainText as a var called currentSize var currentSize = $mainText.css('font-size'); // parse the number value out of the font size value, set as a var called 'num' var num = parseFloat(currentSize, 10); // make sure current size is 2 digit number, save as var called 'unit' var unit = currentSize.slice(-2); // javascript lets us choose which link was clicked, by ID if (this.id == 'linkLarge'){ num = num * 1.2; } else if (this.id == 'linkSmall'){ num = num / 1.2; } // jQuery lets us set the font Size value of the mainText div $mainText.css('font-size', num + unit); return false; }); // hover for links - toggle css background colors $("a.changer").hover(function(){ $(this).css('background-color', '#0099fb'); }, function(){ $(this).css('background-color', '#fff'); }); // hide switchLinks on page load $('#switchLinks').hide(); // show the switchLinks div if showme is clicked $('#showMe').click(function(){ $(this).hide(); $('#switchLinks').show(); return false; }); // hide switchlinks if it is clicked $('#switchLinks').click(function(){ $(this).hide(); $('#showMe').show(); return false; }); });