Show quoted text and hide quoted text in JavaScript

In GMail, we can see "show quoted text" and "hide quoted text"
in the mail body. We can apply the same functionality in blog posts
use JavaScript.

1) First, we need to define two CSS classes: hidden and displayed
<style type="text/css">
.hidden { display: none; }
.displayed { display: block; }
</style>

2) Second, we need to define a Javascript function display to toggle
between hide and display
<script type="text/javascript">
function display(divID) {
    var item = document.getElementById(divID);
    
    if (item) {
        document.getElementById('toggletext').innerHTML =(item.className=='hidden')?'Hide quoted text':'Show quoted text';
        item.className=(item.className=='hidden')?'displayed':'hidden';
    }

}
</script>


3) Create a hide and display link

<a id='toggletext' href="javascript:display('testcode');">Show quoted text</a>
<div id="testcode" class="hidden">
    <h3>Welcome to Jiansen Lu blogs</h3>
  </div>


Result (click to see the hidden text)


Show quoted text

Welcome to Jiansen Lu blogs