Question

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?

Answer 1

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.