Use show or shown in JavaScript

Question

I am using below JavaScript code. Instead of hidden. i want if div is visible then hide it on page load. on button click it should be visible. but current it is doing the opposite.

<script type="text/javascript">
    $(document).ready(function () {
        $("#lnkbtn").click(function () {
           if ($('#divreg').is(":hidden")) {
                $('#divreg').show(500);
                document.getElementById('lnkbtn').innerHTML = "Hide";
            } else {
                $("#divreg").hide(500);
                document.getElementById('lnkbtn').innerHTML = "Show";

            }

        });
    });
</script>

HTML:

   <asp:Button ID="lnkbtn" runat="server" Text="Additional Details" CausesValidation="False" OnClientClick="return false;"  />
   <div id="divreg">
     <p> Some content here.. </p>
   </div>

Answer 1

in your fiddle, you are using "display:none" as the css to hide the div, but you are checking for is using :hidden which means that it will never test true; you need to change the css to "visibility:hidden" and it works as expected

Answer 2

see this fiddle .

You can hide it on load of jquery, check if it is visible hide it:

if ($('#divreg').is(":visible")) {
  $("#divreg").hide();
}

Then on your click event perform hide/show:

$("#lnkbtn").click(function() {
  if ($('#divreg').is(":hidden")) {
    $('#divreg').show(500);
    $('#lnkbtn').val("Hide");
  } else {
    $("#divreg").hide(500);
    $('#lnkbtn').val("Show");

  }

});