Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Show and hide comments, using jQuery
button.showComments { margin-right: .5em }
.comment { font: inherit; white-space: pre-wrap; color: #ccc }
<p><button class="showComments">Show Comments</button>
<!-- Example -->
// 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);
});
Owner

sbp commented Dec 10, 2011

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

Owner

sbp commented Feb 12, 2012

hi

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment