Simpler implementation
I was able to change the implementation process so that only three steps are required:
- Create the show/hide content inside an element or surround the desired content with a
div
orspan
. Place an anchor inside the element and give it a class ofshContent
. - Attach the script file.
- Attach the default stylesheet. Made any additional style declarations as desired.
div
s and class
es is no longer needed to indicate what text is part of the show/hide routine. The script now looks for the anchor and then performs all actions on the container tag. Not only does this simplify implementation, but it also fixes some of the problems I noted in a previous post regarding structure vs. compatibility.Updated anchor linking
Links coming into a page can now use the show/hide content anchor rather than having to create an extra anchor on the show/hide action link. The script will then determine where the action link is, activate it, then scroll to that position.
The exception being browsers that don't run the code (such as Nav4). These browsers lands at the show/hide content rather than the action link. This is not the preferred action but I think it's acceptable. I'll continue to investigate to see if I can get it to land on the action link.
I also added a "scroll to" action to the script for non-show/hide anchors accessed when first entering a page. This addition was necessary because Firefox jumps to an anchor prior to running the script, causing the page to shift after the final scroll position has been set. This is a problem since the page can shift significantly when more than a few show/hide sections are present on the page.
Bug fixes
Links to other pages with the an anchor matching that of a show/hide content anchor on the current page was broken with the current update. This bug was caused by the removal of the
shLink
class, which was previously used to determine the action link. I now have the script check the page each link points to in order to determine if a link is supposed to affect the show/hide content display.