title: Function inside click event needs 2 clicks to trigger
body: <p>I have an <code>a</code> link with id <code>#searchBoxPop2</code>. Once its clicked, I want to trigger <code>#searchBoxPop2.toggle</code> function. My problem is I have to click twice on the link for the toggle to trigger. Can you guys please help this dirty script? Thanks a lot</p>
  
  <pre><code>  $('#searchBoxPop2').live('click', function () {
        if (!$('.header-wrapper-home').length) {
            $('div.right-block').show();
  
                $('#searchBoxPop2').toggle(
                function () {
                $('.detail-page-content').animate({
                    marginTop: "+=290px"
                }, 800)
            },
                function () {
                $('.detail-page-content').animate({
                    marginTop: "0px"
                }, 800);
            });
        }
        if ($('.header-wrapper-home').length) {
            $('.header-wrapper-home').slideToggle('slow');
  
        }
    });
  </code></pre>
  
  <p>Please let me know if you want me to explain the rest of the code and what Im going to do in detial. </p>