Jquery attr not working Internet Explorer

Question

I have the code below that clicking on an image hides a div. Works perfectly, but does not work in IE ...

Why?

http://jsfiddle.net/mtsys/6qAfp/

codes:

$(document).ready(function () {       
    $('.fechar').click( function() { alert('testes'); $(".nav").attr("hidden",true); });
    $('.mais').click( function() {
        var status = $(".nav").attr("hidden");
        if (status)
        {
            $(".nav").attr("hidden",false);
        }
        else
        {
            $(".nav").attr("hidden",true);
        }
    });
});

HTML:

<div class="header">
    Estágio    
    <div class="mais"></div>
</div>
<div class ="parent">     
    <div class="content">        
        <div id="map_canvas" style="width: 100%; height: 100%;"></div>
    </div>
    <div class="nav"><div class="fechar"></div><div id="dadosDiv"></div></div>   
</div>

tks

Answer 1

Use .hide() and toggle() to change the display of the elements

$('.fechar').click(function () {
    $(".nav").hide()
});
$('.mais').click(function () {
    $(".nav").toggle()
});

Demo: Fiddle

Answer 2

Why not change your JS to:

    $('.fechar').click( function() { alert('testes'); $(".nav").hide(); });
    $('.mais').click( function() {
        $(".nav").toggle();
    });

This will not only simplify your code but utilise jQuery's inbuilt function for toggling content visibility. Incidentally, the issue was the hidden attr reference, this should have been .css('hidden',true) if you want to go down that route...