Adsense


Popular Posts

Wednesday, December 7, 2011

Click to display message box, Javascript





Click "Show message text box" below to show message box, click again to hide message box. So this will save a lot of content space.
Show message text box
Source code:
 <style type="text/css">
<!--
.hidden { display: none; }
.displayed {
background-color: #F4F4F4;
border: 1px solid #CCC;
height: 200px;
width: 300px;
padding: 5px;
display: block;
 }
-->
</style>

<script type="text/javascript">
function display2(divID) {
    var item = document.getElementById(divID);
     
    if (item) {
        document.getElementById('toggletext2').innerHTML =(item.className=='hidden')?'Hide quoted text box':'Show quoted text box';
        item.className=(item.className=='hidden')?'displayed':'hidden';
    }

}
</script>
<a href="javascript:display2('testcode2');" id="toggletext2">Show quoted text box</a>
<div class="hidden" id="testcode2">

<h1>
Welcome to Jiansen Lu blogs</h1>
</div>

No comments:

Post a Comment