EasyToggle (Tab Navigation)
<li><a href="#p1" class="toggle">Panel 1</a></li>
<li><a href="#p2" class="toggle">Panel 2</a></li>
<p id="p1">This is panel 1</p>
<p id="p2">This is panel 2</p>
That's all it takes - the demo has a very slightly more complicated example.
I thought it was finished, until I tested it in Apple's Safari browser. In Safari, the worst possible thing happens. The initialisation code which hides all of the panels after the first one works fine. Unfortunately, the code that causes the links to change which panel is visible fails silently, leaving only the first panel accessible to users with that browser. That's a big problem.
- In a command line shell, execute
defaults write com.apple.Safari IncludeDebugMenu 1(apparently Safari Enhancer lets you do this from a GUI).
- Start Console.app, which lives in /Application/Utilities. Note that this is not the same thing as the command line console. This took me a few moments to figure out. Macs remain a strange new realm of discovery.
Excellent - just what I needed to know. The entire error message I got when I clicked a link?
(event handler):Undefined value. Gee, thanks a lot Safari. If anyone has any ideas how I can fix the script in Safari (or at the very least prevent it from being unusable) please leave me a note.