public
Last active

Show and hide comments, using jQuery

  • Download Gist
fiddle.css
CSS
1 2
button.showComments { margin-right: .5em }
.comment { font: inherit; white-space: pre-wrap; color: #ccc }
fiddle.html
HTML
1 2
<p><button class="showComments">Show Comments</button>
<!-- Example -->
fiddle.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
// 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.

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.