<input type="checkbox" class="bLarger" name="checkBox">

<style type="text/css">
input.bLarger{width: 20px; height: 20px;}</style>

visible   超出區域 （初期値）
hidden  超出部分不顯示
scroll           以scroll顯示
auto          自動顯示 （顯示需要的右方或是下方）

visible   超出區域 （初期値）
hidden  超出部分不顯示
scroll           以scroll顯示
auto          自動顯示 （顯示需要的右方或是下方）

<span style="background:#CCC; ">text</span>

<style type="text/css">
span{background:#FBFEBA;}
</style>

<style type="text/css">
span.bText{background:#3FF;}
</style>

<style type="text/css">
span{border:#999 solid 1px; padding:3px; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px;}
div#show{ margin:10px 0 0 0; padding:5px; border:#999 dashed 1px;}
</style>

<script type='text/javascript'>
function show(obj, id)
{
  var o=document.getElementById(id);
  if( o.style.display == 'none' )
  {
    o.style.display='';
    obj.innerHTML='隱藏';
  }
  else
  {
    o.style.display='none';
    obj.innerHTML='顯示';
  }
}
</script>

<span onclick='show(this, "show")'>顯示</span><br>
<div id='show' style="display:none;">按下文字按鈕後呈現內容</div>

<style type="text/css">
div#show{ margin:10px 0 0 0; padding:5px; border:#999 dashed 1px;}
</style>

<script type="text/javascript">
<!--
  function show(obj,item){
    document.getElementById(item).style.display = obj.checked?"block":"none";
  }
//-->
</script>

<input type="checkbox" onclick="show(this,'show');" />
<div id="show" style="display:none">這是顯示的內容</div>