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