Why Colorbox doesn't work on click event?

Question

I'm using Colorbox in my app. What I'm looking for is, on page load hide div (.box) and when I click on the link, it opens (div.box) and shows it's title (My Box) and style.

<div class="click" href="link">Click here!</div>

<div class="box" style="width:700; height:800;" title="My Box">
    <p>Content goes here</p>
</div>

Here is what i have tried.

<script>
  $(document).ready(function () {
    $('.box').hide();
    $('.click').click(function () {

            open_colorbox(newWidth, newHeight, newTitle);
      });

    function open_colorbox(c_width, c_height, c_title) {
     var options = {
       width: c_width,
       height: c_height,
       title: c_title,
       overlayClose: false
     };
     $.colorbox(options);
    }
  });
  </script>

The above solution doesn't work. What am I missing here?

UPDATE 1:

Based on the below comments and answer(s) I only use one line to open colorbox, but still not working!!!

<script>
  $(document).ready(function () {
    $('.box').hide();
    $('.click').click(function () {
       $(".box").colorbox({ open: true });
     });
  });
</script>

UPDATE 2:

Thanks to @Franklin. His solution is the correct one. Here is an example of how simple Colorbox can be done. http://codepen.io/egyamado/pen/Jnxvi

Answer 1

Inside your click function, can't you just do...

Try adding #id of the div

    $(".box").colorbox({href:"#id", inline:true});

Or

$("a.click").colorbox({href:"#id", inline:true});