Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
HTML page containing Javascript code that illustrates two approaches to hiding tag pairs on a page. See also this blog post: http://craiccomputing.blogspot.com/2013/02/jquery-snippet-to-remove-links-from-page.html
<!DOCTYPE html>
<html>
<head>
<title>Jquery Tag show / hide</title>
<style>
body {
font-family: Helvetica;
font-size:11pt;
padding:5px;
margin:0px
}
.example_1 {
margin-left: 25px;
}
.example_2 {
margin-left: 25px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
// Approach 1
$("#button1").click(function(e) {
e.preventDefault();
$(".example_1 a").each(function() {
var t = $(this).html();
$(this).replaceWith(t);
});
});
// Approach 2
$("#button2").click(function(e) {
e.preventDefault();
$(".example_2 a").each(function() {
// Capture the html content of the link pair to use within the span
var t = $(this).html();
// Capture the html of the Entire tag by wrapping it and getting the html of the new parent
var original_tag = $(this).clone().wrap('<p>').parent().html();
console.log("Saved tag : " + original_tag);
// place this into a custom data attribute - here called 'data-craic' (must be prefixed by 'data-')
// Note that the span is given a unique class name, used to retrieve them later
$(this).replaceWith("<span class='hidden-link' data-craic='" + original_tag + "'>" + t + "</span>");
});
});
$("#button3").click(function(e) {
e.preventDefault();
$(".example_2 .hidden-link").each(function() {
// fetch the original tag from the data attribute
var original_tag = this.dataset.craic;
console.log("Restored Tag: " + original_tag);
$(this).replaceWith(original_tag);
});
});
});
</script>
</head>
<body>
<h2>Jquery Show / Hide tags within a page</h2>
<p>Look at the Source for this page and <a href="http://craiccomputing.blogspot.com/2013/02/jquery-snippet-to-remove-links-from-page.html">this blog post</a> for details.</p>
<h3>Approach 1</h3>
<p>Jquery code to disable / hide all 'a' tags - not able to recover the tag</p>
<p> Example text:</p>
<p class='example_1'>
The Fall are an English <a href="http://en.wikipedia.org/wiki/Post-punk">post-punk</a> band, formed in
<a href="http://en.wikipedia.org/wiki/Prestwich">Prestwich</a>, Greater Manchester, in 1976. <br/>
With an ever-changing line up,
the group essentially consists of its founder and only constant <br/>member, <a href="http://en.wikipedia.org/wiki/Mark_E._Smith">Mark E. Smith</a>,
who has said "If it's me and your granny on bongos, then it's [the] Fall" <a href="http://en.wikipedia.org/wiki/The_Fall_(band)">(Wikipedia)</a>
</p>
<input type="button" id="button1" value="Disable / Hide Links"> Refresh page to show links
<hr>
<h3>Approach 2</h3>
<p>Jquery code to disable / hide all 'a' tags - storing the tag info in a custom data attribute - therefore able to recover the tag</p>
<p> Example text:</p>
<p class='example_2'>
The Fall are an English <a href="http://en.wikipedia.org/wiki/Post-punk" class='foo'>post-punk</a> band, formed in
<a href="http://en.wikipedia.org/wiki/Prestwich">Prestwich</a>, Greater Manchester, in 1976. <br/>
With an ever-changing line up,
the group essentially consists of its founder and only constant <br/>member, <a href="http://en.wikipedia.org/wiki/Mark_E._Smith">Mark E. Smith</a>,
who has said "If it's me and your granny on bongos, then it's [the] Fall" <a href="http://en.wikipedia.org/wiki/The_Fall_(band)">(Wikipedia)</a>
</p>
<input type="button" id="button2" value="Disable / Hide Links">
<input type="button" id="button3" value="Enable / Show Links">
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment