Question

On click, I want to hide/show some html code(which is obtained via a GET request to another page). It works but the problem is that it requires two clicks instead of one.

There is one other question that seems related but I am not able to understand that.

  <script>
     $(document).ready(function(){
        $(".quote-toggle").click( function(event) {
            var id = $(this).attr('id');
            $.get( $(this).attr('href'), function(msg) {
                if($("#toggler_" + id).html()=='show') {
                    $("#" + id).html(msg);
                    $("#toggler_" + id).html('hide'); 
                  }
                else {
                    $("#" + id).html('');
                    $("#toggler_" + id).html('show'); 
                 }
            });
            event.preventDefault();
        });
     });
   </script>

This is my first time with jquery/javascript. Any explanation or suggestions for the code would be much appreciated.
[Edit]
jsfiddle: http://jsfiddle.net/KCLf5/1/

Answer 1

If I had to guess, $("#toggler_" + id)‘s html is not set to show. So the first click will set it to show and the second will load the data.

Make sure that the toggler has the correct html when the page loads