Question

I am using colorbox.js to display some forms in a lightbox. There are multiple forms on a page and each form has a link that will open the form in the lightbox. Right now, the lightbox will open but the form will not be showing. Here is my jquery script:

jQuery(document).ready(function() {

    $('.myForm').hide();

        $('.link_to_form').click( function() { $(this).next('.myForm').show() } );

        $(".link_to_form").colorbox({ 
            width: "50%", 
            inline: true,
            opacity: ".5", 
            href: ".myForm", 
            onClosed: function() {
                $(".myForm").hide();
            }

            });
    });

My HTML for two forms and two links is:

<a href="#" class="link_to_form">Form 1</a>
<div class="myForm">
<form></form>
</div>
<a href="#" class="link_to_form">Form 2</a>
<div class="myForm">
<form></form>
</div>

Answer 1

Working demo http://jsfiddle.net/2anwK/3/

script

  <script type='text/javascript' src="http://www.benariac.fr/fabien/jsfiddle/colorbox/colorbox/jquery.colorbox.js"></script>

  <link rel="stylesheet" type="text/css" href="http://www.benariac.fr/fabien/jsfiddle/colorbox/colorbox/colorbox.css">

code

$('.myForm').hide();

$('.link_to_form').click(function() {
    $(this).next('.myForm').show()
});

$(".link_to_form").colorbox({
    width: "50%",
    inline: true,
    opacity: ".5",
    href: ".myForm",
    onClosed: function() {
        $(".myForm").hide();
    }

});

Working Image