Problem with Jquery function

Question

The function I created in Jquery, is not being called in the 1st click, it is only triggered in the 2nd. I am using Asp.net, C#, I need the panel component to start hidden, with this, when clicking on the tag p it appears and so call the toggle() method every time I click on it. My code is this:

<script type="text/javascript">
    $(document).ready(function () {
        $("#pnlSalas").css('visibility', 'hidden');
        $('.a').click(function () {
            $("#pnlSalas").toggle();
            $("#pnlSalas").css('visibility', 'visible');
        });
    });
</script>

Answer 1

The problem is that when you use

$(document).ready(function () {
    $("#pnlSalas").css('visibility', 'hidden');

in jQuery’s eyes that element is not hidden.

So when you do .toggle() in the first click it hides, ie gets style="visibility: visible; display: none;". So it hides despite not being visible to the user from the start.

In practice you can simplify for this:

$(document).ready(function () {
    $("#pnlSalas").toggle();
    $('.a').click(function () {
        $("#pnlSalas").toggle();
    });
});

Example: http://jsfiddle.net/hrLL6dmL/