<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<mce:script type="text/javascript" src="jquery-1.2.6.min.js" mce_src="jquery-1.2.6.min.js"></mce:script>
<title>jQuery change button </title>
<mce:style type="text/css"><!--
  body.narrow .chapter { width: 400px; font-size:12px; }
  body.large .chapter  { font-size: 1.5em; }
  .selected            { font-weight: bold; }
  #switcher div        { float:left; border:#000 1px solid; cursor: pointer; }
  .hidden              { display: none; }
  #switcher .hover     { cursor: pointer; background-color: #afa; }
--></mce:style><style type="text/css" mce_bogus="1">  body.narrow .chapter { width: 400px; font-size:12px; }
  body.large .chapter  { font-size: 1.5em; }
  .selected            { font-weight: bold; }
  #switcher div        { float:left; border:#000 1px solid; cursor: pointer; }
  .hidden              { display: none; }
  #switcher .hover     { cursor: pointer; background-color: #afa; }</style>
<mce:script type="text/javascript"><!--
  $('document').ready(function(){
     $('div.button').click(function(){
	    var $speech =  $('div.speech');
		var currentSize = $speech.css('fontSize');
		var num = parseFloat(currentSize, 10);
		var unitT = currentSize.slice(-2);
		if(this.id == 'switcher-large'){
		  num *= 1.4;
		}else if(this.id == 'switcher-small'){
	      num /= 1.4;
		}
		$speech.css('fontSize', num + unitT);
	 });
	 
	 $('p:eq(1)').hide();
	 
	 $('span.more').click(function(){
	  //$('p:eq(1)').show('fast');
	  $('p:eq(1)').fadeIn('slow');
	  $(this).hide();
	  $('span.less').show();
	 });
	 
	 $('span.less').click(function(){
	   $('p:eq(1)').hide();
	   $(this).hide();
	   $('span.more').show();
	 });
	 
	 $('div.label').click(function(){
	    $('div.button').animate({left:650, height: 39}, 'slow');
	 });
  });
// --></mce:script>
</head>
<body>
<div id="switcher">
  
  <div class="label" >Style Switcher</div>
  <div class="button" id="switcher-large">Increase Text Size</div>
  <div class="button" id="switcher-small">Decrease Text Size</div>  
</div>
<br/>
<div class="speech">
  <p>
  I love being 1/3 of Paravel. I don’t know how other web shops work, but I do know that I like how we roll. It’s taken some hard work to build the team as well as the company, but I wouldn’t trade all the psds, lines of code and fisticuffs for anything. With that in mind, I thought a brief, selective glance over the past few years might be of interest. Sure, we’ve faced our share of challenges and still do, but we’re genuinely
 <span class="more">. .  .</span></p>
 <p>
   Wonderbra Ultimate Strapless Party at Punk nightclub on November 26, 2009 in London, England.
   The Wonderbra Ultimate Strapless is quickly becoming the must-have fashion item of the season. To celebrate we’re throwing an exclusive<span class="less">. .  .</span></p>
 </p>
</div>
</body>
</html>