How do I use colorbox to show hidden divs on my page without hardcoding?

Question

I'm using Colorbox to show the html content of hidden divs on my page. I can get this to work perfectly with the following:

$("a.colorbox").colorbox({width:"600px", inline:true, href:"#344"});

This will show the div with the ID of 344.

However, because I'm trying to build a scalable and dynamic page with WordPress, I want to be able to grab the ID of my divs through a function, rather than hard code them in the jquery call.

I modified Jack Moore's example:

$("a[rel='example']").colorbox({title: function(){
    var url = $(this).attr('href');
    return '<a href="'+url+'" target="_blank">Open In New Window</a>';
}}); 

so that it looks like this:

$(".colorbox").colorbox({width:"600px", inline:true, href:function(){
    var elementID = $(this).attr('id');
    return elementID;
}}); 

The problem with this is that the href property of the colorbox function is looking for a string with a # mark infront of the ID. I tried various ways of concatenating the # to the front of the function, including the # in the return value, and concatenating the # to the elementID variable. No luck.

I also tried using the syntax in Jack's example (with no luck) so that my return statement looked like this:

return "#'+elementID+'";

I think my basic question is: How do I use colorbox to show hidden divs on my page without hardcoding everything?

Thanks for your help, Jiert

Answer 1

return "#" + elementID; 

will have the desired effect as David says.

Answer 2

I'm facing the same issue. What does your html look like? meaning, how did you structure your "divs"

Mine looks like this: Javascript:

<script>
    $(document).ready(function () {
    $("a.colorbox").colorbox({ width: "50%", inline: true, href: function () {
          var elementID = $(this).attr('id');
          return "#" + elementID;
       } 
      }); 
    });
</script>

And the html looks like (I tried changing the display:none):

<a class='colorbox' href="#">Inline HTML</a>
   <div style="display:none">
       <div id="pop">
          This data is to be displayed in colorbox
       </div>
   </div>