Show and hide comments, using jQuery

fiddle.css

button.showComments { margin-right: .5em }
.comment { font: inherit; white-space: pre-wrap; color: #ccc }

fiddle.html

<p><button class="showComments">Show Comments</button>
<!-- Example -->

fiddle.js

// Create button.showComments to interface
// Style .comment for flavour

function showComments() {
   $('*').contents().filter(function() {
      return this.nodeType == 8;
   }).each(function(i, e) {
      pre = $('<pre class="comment"></pre>');
      $(e).after(pre);
      pre.text(e.nodeValue.replace(/^[ \t\r\n]+/, ''));
      // pre.wrap('<details></details>'); 
      // $('<summary>&lt;!-- --&gt;</summary>').insertBefore(pre); 
   });
   $('button.showComments').text('Hide Comments').click(hideComments);
}

function hideComments() {
   $('pre.comment').remove();
   $('button.showComments').text('Show Comments').click(showComments);
}

$(function() {
   $('button.showComments').click(showComments);
});

The "fiddle" filenames are to enable the preview of this code on jsFiddle.

hi

hhhhhh