Question

I have five links rendered at page that represents navigation header of the page, also I have 5 divs rendered on the same page. that caries the content of the page. Each link in header is related to the one div with content. When clicking on the links one div is showed with jQuery function .show() and all the others are hidden with jQuery function .hide()

The problem is when page is opened in IE 6 browser, after 2 or 3 clicks on links page gets rendered wrongly. Div with content are mixed.

I have tried to click on links slowly but problems remains, so it is not because of slow processing in IE 6.

What could cause this problem?
Is there any solution for this?
Did someone have similar problems?

Thanks a lot.

Answer 1

Don’t use toggle for this since you will keep state (clicked|not clicked) as well
A simple click method will do, showing content and hiding siblings

A solution for you http://jsfiddle.net/48LEq/

HTML:

<ul id="mymenu">
    <li><a href="#" rel="content1">item 1</a></li>
    <li><a href="#" rel="content2">item 2</a></li>
    <li><a href="#" rel="content3">item 3</a></li>
    <li><a href="#" rel="content4">item 4</a></li>
    <li><a href="#" rel="content5">item 5</a></li>
</ul>

<div id="content1" class="content">content 1</div>
<div id="content2" class="content">content 2</div>
<div id="content3" class="content">content 3</div>
<div id="content4" class="content">content 4</div>
<div id="content5" class="content">content 5</div>

CSS

.content {display:none;}

JS

// Once the DOM is ready
$(function() {
    // load first content
    $(".content:first").show();
    // bind the click method                
    $("#mymenu a").click(
        function() {
            var content = "#" + $(this).attr("rel");
            $(content).siblings(".content").hide();
            $(content).show();
        }
    );
});