Group a collection of items in Colorbox

Question

I am using the colorbox plugin and I am trying to group a collection of elements. I am doing something simple grouped photos into examples (click any of the grouped photos). Instead of using images, I would like to use html div.

The html / js examples look something like this.

Js

$("a[rel='example1']").colorbox();

HTML

<p><a href="ohoopee1.jpg" rel="example1">Grouped Photo 1</a></p>
<p><a href="ohoopee2.jpg" rel="example1">Grouped Photo 2</a></p>

In addition, I would like to call Colorbox with the button pressed. Here's what I have right now, it's a bit messy, and I have the feeling that there is a cleaner way to do this using some of Colorbox's native features.

To summarize, I simply replace the contents of the colorbox manually with the click event.

Js

//Login popup
$('.loginButton').bind("click", function(){
    $.colorbox({
            inline: true, 
            href: "#login1",
            width: "420px"
            });
});
//forgot password           
$("#forgot").click(function(){
    $('cboxContentLoaded').html($("#login2").html());
});

HTML

<div style="display: none;">
    <div id="login1">
        <h2>Members Login <img src="images/logo_small.png" alt="100 Trade Jack" /></h2>
        <dl>            
            <dt>Email:</dt>
            <dd><input class="xmlLogin" type="text" size="20" name="username" /></dd>
            <dt>Password:</dt>
            <dd><input class="xmlLogin" type="password" size="20" name="password" /></dd>
        </dl>
        <input type="image" src="./images/button.login.jpg" width="104" height="55" class="subLogin" />
        <p id="forgot"><a href="#">Forgot Password?</a></p>
        <div id="errorMessage"></div>
    </div>
    <div id="login2">
        <p>Please Enter your Email Address and we will send you instructions on how to renew your password</p>
        <input type="text" id="resetPassEmail" />
        <input type="button" id="passRest" value="Reset Password" />
    </div>
</div>

, , rel, html. , , .

/. .

UPDATE:

, , . colorbox , div, # login1, . ( - )

Answer 1

, Next- htmls.
. , , colorbox, :

<div id="cBoxHack" style="display: none"> style = "display: none" div login1.

,

$("#login1").show();
$("#login2").hide();
$("#login3").hide();

$('.loginButton').bind("click", function(){...

.