Simply create an element with links to anchors named as the desired body class (the # will be removed before the class is assigned to the body) <div id="font_size"> <ul> <li><a href='#small_font'>small</a></li> <!-- clicking will give the body tag a class of 'small_font' --> <li><a href='#medium_font'>medium</a></li> <!-- clicking will give the body tag a class of 'medium_font' --> <li><a href='#large_font'>large</a></li> <!-- clicking will give the body tag a class of 'large_font' --> </ul> </div> In the head of your document include jquery, jquery.cookie (from: http://plugins.jquery.com/project/cookie), and jquery.body-class-swap.js Then simply initialize the classSwapper(); <script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script> <script language="javascript" src="jquery.cookie.js" type="text/javascript"></script> <script language="javascript" src="jquery.body-class-swap.js" type="text/javascript"></script> <script type="text/javascript" charset="utf-8"> $(document).ready(function() { $('#font_size').classSwapper(); }); </script> Helpful Notes -------------- * if you are using the cookie plugin and saving the state make sure you give your container an id as that is what is used for the name of the cookie
alexwelch/body-class-swap
A simple plugin to swap classes on the body, useful for theme-switchers, font-sizers, etc.
JavaScript