Question

I have an inline hidden div that I would like to open in a Colorbox window once a link from the main Colorbox is clicked.

I got the close onclick functionality to work but I can’t get the new Colorbox to open.

Script

// close main colorbox onclick and open promotionForm    
jQuery("#add").click(function() {
    parent.jQuery.colorbox.close();
    $(".promotionForm").colorbox({inline:true, width:"50%"});
});

Html

<a id="add" href="#">Add a Promotion</a></p>

<!-- This contains the hidden content for promotion form -->
<div style='display:none'>
    <div id='promotionForm' style='padding:10px; background:#fff;'>
        <%= render 'shared/promotion_form'%>
    </div>
</div>

Answer 1

Try the option, open:true added to your $(“.promotionForm”) selector. I think by default colorbox expects a click even to be fired.

$(“.promotionForm”).colorbox({inline:true, width:”50%”, open:true });