Problem with Jquery function

1

The function I created in Jquery, is not being called in the first click, it is only triggered in the 2nd. I'm using ASP.NET, C #, I need the panel component to start hidden, so by clicking on the p tag it appears and so calling the toggle () method every time you click 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>
    
asked by anonymous 27.05.2015 / 22:44

1 answer

4

The problem is that when you use

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

In the eyes of jQuery this element is not hidden.

Then when you do .toggle() on the first click it hides, that is, it gets style="visibility: visible; display: none;" . Therefore it hides although it has not been visible to the user since the beginning.

In practice you can simplify this:

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

Example: link

    
27.05.2015 / 22:51