When element got visible in Javascript it toggle back to hidden

Please help as when ever i clcik and call Javascript function to unhide an element it turn back hidden again. it takes a second or less.

HTML

<asp:Button ID="btnFromCalOpen" Width = "35" runat="server" Text="&gt;"  style="display:none; visibility:hidden;"  OnClientClick ="ShowCal()"  />

Javascript

function ShowCal() {

var elem = document.getElementById('MainContent_CalendarFrom');

if (elem.visibility = "hidden" ) {
    alert("Show");
    elem.style.visibility = "visible";
    elem.style.display = "inline";
}
else {
    alert("Hide");
    elem.style.visibility = "hidden";
    elem.sty开发者_StackOverflowle.display = "none";
}
} 

it like when ever i click on the button it refresh its style properties of all elements

Please help

You have an error/bug on your code here

if (elem.visibility = "hidden" ) {

you not check for the if, but you set it hidden !

To avoid this kind of errors try this way / trick

if ("hidden" == elem.visibility ) {

Two major problems in your code.

1. elem.visibility is not an attribute of your object. If you want to look at the style setting, it would be elem.style.visibility.
2. A comparison is done with == or ===, not with =. You were doing an assignment operation with =.

Try this code:

function ShowCal() {

    var elem = document.getElementById('MainContent_CalendarFrom');

    if (elem.style.visibility == "hidden" ) {
        alert("Show");
        elem.style.visibility = "visible";
        elem.style.display = "inline";
    }
    else {
        alert("Hide");
        elem.style.visibility = "hidden";
        elem.style.display = "none";
    }
} 

FYI, there's no need to set both style.visibility and style.display. If you're going to set style.display to "none", then the visibility setting isn't needed.

A simpler version of your code would be this (which you can see working here in this jsFiddle):

function ShowCal() {

    var elem = document.getElementById('MainContent_CalendarFrom');

    if (elem.style.display == "none" ) {
        elem.style.display = "inline";
    } else {
        elem.style.display = "none";
    }
} 

And, remove the visibility: hidden from the HTML for this tag. The display: none is all you need.

For reference (in case this is a possibility), this is one of those places that libraries like jQuery or YUI are handy. In jQuery this would just be:

function ShowCal() {
    $("#MainContent_CalendarFrom").toggle();
}