jQuery Colorbox: Clicked element hides from background

Question

I have a scenario where I don't need tags outside of divs like:

<a href="#box">
<div class="colorboxElements">click here!</div>
</a>
<div id="box">here is the content!</div>

So, I had to use href to each div element and then I gave IDs to the elments of the class:

$('.colorboxElements').each(function(index) {
$(this).attr("href","#box"+index);
$(this).attr("id","box"+index);
});

$(".colorboxElements").colorbox({rel:'colorboxElements', inline:true, href:$(this).attr('href'), transition:"none", width:"75%", height:"auto"});

Now, when I click on any element of class .colorboxElements, it shows on the colorbox but the problem is the clicked element gets hide from the background and also "Prev" and "Next" buttons are not working when I click back on reaching first element, and click next after last element respectively.

http://jsfiddle.net/etRtm/

Answer 1

Here is a FIDDLE

HTML

<div class="colorboxElements"> 
    <a href="#box">click here!</a>
    <div id="box" class="box">here is the content!</div>
</div>

JS

$('.colorboxElements a').each(function (index) {
    $(this).attr("href", "#box" + index);
    $(this).siblings('.box').attr("id", "box" + index);
});

$(".colorboxElements a").colorbox({
    rel: 'colorboxElements',
    inline: true,
    transition: "none",
    width: "75%",
    height: "auto"
});