colorbox div won't display

I am trying to show a hidden div in a colorbox on click

I cant figure out how to show the div inside the colorbox

the div is hidden, but I want it to be visible when it is displayed inside the colorbox obviously

<div class="test">test</div> // on click

<div id="messageform" style="display: none;"> // show this in colorbox
TEST
</div>    



$('.test').click(function(){
$.colorbox({inline:true, width:"50%", open:true, href:"#messageform" }); 
});

this works only when the form messageform is not hidden, but how can i show on click in the colorbox?

Solution

You can either wrap the messageform inside a div that has display:none or you can set it to show on click:

$('.test').click(function(){
  $('#messageform').show();
  $.colorbox({inline:true, width:"50%", open:true, href:"#messageform" }); 
});

Here is a demo with a container that is set to display none:http://jsfiddle.net/fbenariac/4vuDC/

Also you could use the colorbox events to show/hide: http://jsfiddle.net/lucuma/LK4tt/1/

$('.test').click(function(){

$.colorbox({inline:true, width:"50%", open:true, href:"#messageform",
            onClosed: function() {
                 $('#messageform').hide();
            },
            onOpen: function() {
                 $('#messageform').show();
            }
           }); 
});