Why is this code running before the 'click' event?
<p>I have what seems to be a simple issue. I have a jquery function that's running on page load, despite the fact that I specifically set it to run after the 'click' event on a specific element.</p>

<p>This is the function: </p>

<pre><code>    $('#boxShow').click(function() {
      $('#colorBox').animate({
        height: 'toggle'
      }, 400, function() {
        // Code that will run after the click
      });
    });
</code></pre>

<p>Is there a way to prevent this code from running before the 'click' event? Thanks!</p>

<p><strong>EDIT:</strong></p>

<p>The full jquery code:</p>

<pre><code>$(document).ready(function() {  

    $("#accordion").accordion({
        event: "click"
    });

    $("#TagsSelectBox").multiSelect({ 
        minWidth:130,
        selectedList:5,
        showHeader:false
    });

    $('#boxShow').click(function() {
        $('#colorBox').animate({
        height: 'toggle'
        }, 400, function() {
            // Animation complete.
        });
    });

    $('#test').colorPicker({            
        defaultColor: 0, // index of the default color (optional)
        columns: 13,     // number of columns (optional)  
        click:function(c){
        $('#boxShow').css("background-color",c);
      } 
    });
});
</code></pre>

<p><strong>EDIT:</strong>
Just in case anyone wants to know, here's the final version after making a few adjustments to make it generic enough for multiple 'color-pickable' items:</p>

<p><a href="http://pastebin.com/pma0DNCB" rel="nofollow">Final Version</a></p>

<p>If you want to try it out yourselves, you can download the color picker plugin from the syronex site. The link is in the comments!</p>

<p>Thanks to everyone who helped me achieve this!</p>
