jQuery Colorbox hide content on close

I am trying to display a hidden div in colorbox using an <a> link's onclick

The fiddle -> http://jsfiddle.net/hSp3m/1/

Here is my markup,

<style type="text/css">
.lightbox-content{ display: none }
</style>

<div class="panel yellow">
    <h4 class="font">Title</h4>
    <a title="View now &raquo;" class="learnmore" href="#">View now &raquo;</a>
    <div class="lightbox-content">
        <h4>The first lightbox</h4>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
    </div>
</div>

<script type="text/javascript">
    $('.panel .learnmore').click(function(e){
        e.preventDefault();
        var d = $(this);
开发者_如何转开发        $.colorbox({
            width: 920,
            inline: true,
            href: d.siblings('div.lightbox-content'),
            opacity: 0.5,
            open: true,
            onLoad: function(){
                d.siblings('div.lightbox-content').fadeIn()
            },
            onCleanup: function(){
                d.siblings('div.lightbox-content').hide()
            }
        })
    });
</script>

Now the lightbox will open, and load content fine. It will even fade the content in. The problem is that once the lightbox has closed, a display: block style is applied to .lightbox-content which I can't seem to get rid of.

I want to keep the content hidden, show it on click in the lightbox, and then hide it again on close.

Any ideas please?

Here ya go. You needed to wrap it in a hidden container. The inline command takes the content and then replaces it after the color box is closed. jsfiddle

http://jsfiddle.net/hSp3m/9/

$('.panel .learnmore').click(function(e){
    var d = $(this);
    $.colorbox({
        width: 600,
        inline: true,
        opacity: 0.5,
        href: d.siblings('div.lightbox-content'),
        onOpen: function(){
            d.siblings('div.lightbox-content').fadeIn()
        },
        onCleanup: function(){
            $('div.lightbox-content').hide();
        }
    }); return false;
});

Looking @ the functionality, it should have all lightbox-content hidden, so the oncleanup was changed to clear down all lightbox content divs.