Skip to content

Instantly share code, notes, and snippets.

@wjcrowcroft
Created January 30, 2012 10:17
Show Gist options
  • Save wjcrowcroft/1703711 to your computer and use it in GitHub Desktop.
Save wjcrowcroft/1703711 to your computer and use it in GitHub Desktop.
jQuery Revealer Plugin - a stupid little jQuery (JavaScript) plugin to make simple revealer links (e.g. '[view]') that expand text/HTML content on-click
/**
* jQuery Revealer plugin
* Joss Crowcroft / @josscrowcroft
*
* Replaces an element containing text or HTML with a link that reveals the
* original contents when clicked.
*
* Super simple, no options or anything, but could be added easily.
*
* Example:
* <span class="whatever">some long-form text or HTML</span>
* <script> $('.whatever').revealer() </script>
*
* License: MIT; Copyright 2012
*/
(function($){
// The plugin:
$.fn.revealer = function() {
return this.each(function() {
var linkText = '[view]',
hiddenValue = $(this).html();
$(this).replaceWith('<a class="revealer" href="#" data-reveal="' + encodeURIComponent(hiddenValue) + '">' + linkText + '</a>');
});
};
// Set up revealer links' click action:
$(document).on('click', '.revealer', function() {
$(this).replaceWith('<span class="replaced">' + decodeURIComponent($(this).data('reveal')) + '</span>');
return false;
});
})(jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment