How to display multiple divs in Colorbox as a slideshow?

Say I have a list of divs identified by class .e.g '.myclass'

Inside each div will be some html content rather than an image. How do I go about opening the colorbox() so that on clicking the arrows, they will flick through the divs?

I looked at the following post which is the same problem, but his solution gives me no clue as to how h开发者_如何学运维e got it working: Duplicate question

Is colorbox even the correct plugin for this?

UPDATE:

I know you already accepted an answer, but here's a much cleaner approach than the currently accepted answer:

http://jsfiddle.net/rc5m7/14/

HTML:

<div class="colorbox">Div #1
    <div style="display:none">
            Data#1 inside div.  This is just a test.
    </div>
</div>

<div class="colorbox">Div #2
    <div style="display:none">
            Data#2 inside div.  This is just a test.
    </div>
</div>

JS:

$(document).ready(function() {
    $('div.colorbox').each(function() {
        $(this).colorbox({
            html: $(this).find('div').html(),
            rel: 'group_1'
        });
    });
});

Here's the best I could get it. I had to group it with 'rel', and call colorBox once for each div that you wanted to group.

http://jsfiddle.net/briguy37/rc5m7/

UPDATE

I've updated the base fiddle above to Adam's solution. He uses .each and .find nicely to allow iterating through divs of the same className rather than by unique id. You can see my original solution here: http://jsfiddle.net/rc5m7/13/

This worked for me perfectly - prefered to keep inline content all together. Just make sure you use the latest Colorbox version (currently 1.3.19).

<a class="info_link" rel="help_msg1" href="#">Need help 1?</a>
<a class="info_link" rel="help_msg2" href="#">Need help 2?</a>

<div style="display: none;">
    <div id='help_msg1'>
        Help message 1 goes here
    </div>
    <div id='help_msg2'>
        Help message 2 goes here
    </div>
</div>

And JS looks like that:

$(document).ready(function() {
    $(".info_link").colorbox({    
      width:"50%",
      inline: true,
      href: function () { return '#'+$(this).attr('rel') }
    });
});

Just to follow on from Adam's solution, you can actually supply functions as settings parameters, which would mean you wouldn't have to use an each() which can sometimes be a little power hungry.

HTML:

<div class="colorbox">Div #1
    <div style="display:none">
            Data#1 inside div.  This is just a test.
    </div>
</div>

<div class="colorbox">Div #2
    <div style="display:none">
            Data#2 inside div.  This is just a test.
    </div>
</div>

JS:

$(document).ready(function() {
    $('div.colorbox').colorbox({
        html: function() { return $(this).find('div').html(); },
        rel: 'group_1'
    });
});