|
<!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> |
