Hide anchors using jQuery
- by Eric Di Bari
I've created a dynamic page that, depending on the view type, will sometimes utilize the anchor tags and other times not. Essentially, I want to be able to control if on click the page jumps to the anchor. Is it possible to hide anchor tags using jQUery, so they are essentially removed? I need to be able to re-enable the anchors when necessary, and always show the current anchor in the browser's address bar. It seems to work in FireFox, but not in Internet Explorer.
I have three sections: the 'table of contents', the content, and the javascript (jQuery) code
Table of Contents
<a id="expandLink0" class="expandLinksList" href="#green">What is green purchasing</a><br>
<a id="expandLink1" class="expandLinksList" href="#before">Before you buy</a><br>
Contents
<ul id="makeIntoSlideshowUL">'
<li id="slideNumber0" class="slideShowSlide">
<a name="green"></a>
<div>Green Purchasing refers to the procurement of products and service...<a href="#topOfPageAnchor" class="topOfPageAnchorClass">Back to Top</a></div>
</li>
<li id="slideNumber1" class="slideShowSlide">
<a name="before"></a>
<div>We easily accomplish the first four bullet points under...<a href="#topOfPageAnchor" class="topOfPageAnchorClass">Back to Top</a></div>
</li>
</ul>
jQuery On Page Load
$(".slideShowSlide").each(function() {
$(this).children(":first-child").hide();
});
jQuery to re-enable links
$(".slideShowSlide").each(function() {
$(this).children(":first-child").show();
});
