Problem when clicking the button, call ajax

Question

Code:

<button id="click" class="button"></button>
    <div class="TableCSS">
        <table id="clickvent">
        </table>
    </div>

 

   $(document).ready(function(){
            $("#click").click(function(){
                if($("#clickvent").is(":visible")){
                        $("#clickvent").hide();
                    } else{
                        $("#clickvent").show();
                    }                   
                $.ajax({
                    url: "../Conteudo/click.html",
                    cache: false,
                    dataType: 'html'
                })
                .done(function(retorno) {
                    $("#clickvent").html(retorno);
                })
                .fail(function() {
                    alert("Algo está errado");
                });
            });
        });

It’s calling all right but when I click the button you need to double click to load the content of the page click.html. Can anyone tell me the error ? And only by pressing for the first time happens that you have to click twice, to hide the content is normal just to load that happens.

Answer 1

You have to click 2 times to appear because when the page is loaded the condition if($("#clickvent").is(":visible")) already gives true then it executes the hide() for only the next click appear. Suggested solution is before the execution of the click from the button add the following line:

$("#clickvent").hide();

Another solution would be to add CSS the following:

#clickvent {
   display: none;
}