CODEWITHSUNDEEP
jqueryajax
Randy Geily
Randy Geily

Reputation: 139

Ajax jquery toggle button

Here is the code, I'm using toggle. I want to toggle when the index.php has loaded. In the code below, when I click it opens up and close by itself. I placed the toggle before, and when Click it works BUT for the first time I have to click the button twice.

<script>
    $(document).ready(function(){

        $("#btn").click(function(){ 

            // $("#output").toggle("slow",function(){ // placed before

            $("#output").load("index.php",null,function(){ 

        $("#output").toggle("slow"); // placed after

        })
        }); 
    });
</script>

Note: Index.php files generates a list of links. when I click on the button need it show and hide the list.

I also did load the content first and toggle second, as mentionned In the reply below. But when I click on the button it opens and hides on first click.

Upvotes: 1

Views: 4380

Answers (3)

Devjit
Devjit

Reputation: 375

$(document).ready(function(){

    $("#btn").click(function(){ 

        // $("#output").toggle("slow",function(){ // placed before

        $("#output").load("index.php",null,function(){      
    }).toggle("slow"); // Chained
    }); 
});

Upvotes: 0

Roko C. Buljan
Roko C. Buljan

Reputation: 206008

That's cause your #output in not hidden, it just has no content, so it's visible. Than what you do, you populate it with content and than... violá toggle() hides it.

Make it hidden first:

$(function(){

    var $output = $('#output'); // cache your selectors

    $output.hide(); // !!

    $("#btn").click(function(){ 
        $output.load("index.php",null,function(){ 
          $output.toggle(800); // placed inside
        });
    }); 

});

but still above there's no need to call .load() on every button click so to fix that:

    $output.hide(); // !!

    function toggleOutput(){
        $output.toggle(800);
    }

    $("#btn").click(function(){
        if($output.is(':visible')) return toggleOutput(); // If visible
        $output.load("index.php", null, toggleOutput);    // else
    });

Upvotes: 2

loxxy
loxxy

Reputation: 13151

$(document).ready(function(){

        $("#btn").click(function(){ 

            // if #output is going to be shown then load
            $("#output").load("index.php");

            $("#output").toggle("slow");
        }); 
    });

Upvotes: 0

Related Questions