JSFiddle - React, Tailwind, and code Playground

by snover

HTML

<div id="top">
    This page works as expected in FF3, Chrome, Opera 9, Safari and IE8 <strong>compatibility mode</strong>, but not in IE8 (normal) mode.
    <br />
    <br />
    
    Behaves as expected (foo will be shown with Toggle 1):<br />
    <a href="#" class="toggle1">Toggle 1</a> 
    <a href="#" class="toggle2">Toggle 2</a> 
    <a href="#">foo</a>
</div>

<br /><br /><br /><br />

<div id="bottom">
    foo link is between Toggle 1 and Toggle 2. Now foo is shown with Toggle 2 (after a few clicks):<br />
    <a href="#" class="toggle1">Toggle 1</a> 
    
    <a href="#">foo</a>
    <a href="#" class="toggle2">Toggle 2</a> 
</div>

CSS

a.toggle2 {
    display: none;
}

JavaScript

//$("#top a").live("click", function () {
$("#top a").click(function() {
    $("#top a").toggle();
    return false;
});

$("#bottom a").click(function() {
    $("#bottom a").toggle();
    return false;
});