tabs inside colorbox

<div style="display:none">
            <div id="signup_screen">

            <h1 class="sign"><span class="signupicon"></span>Signup and Creat New account</h1>





       <div class="formbox">

       <ul class="tabs_form">
        <li class="active" rel="tab1"><span class="complet_icon"></span>Relevant News</li>
        <li rel="tab2">Qmunity News</li>
        <li rel="tab3">City News</li>

    </ul>

<div class="tab_container_form">

     <div id="tab1" class="tab_content_form">


      This is tab1 here






     </div><!-- #tab1 -->
     <div id="tab2" class="tab_content_form">

    First form will go here

     </div><!-- #tab2 -->


     <div id="tab3" class="tab_content_form">


    tab3 form will go here


     </div><!-- #tab3 -->




 </div> <!-- .tab_container -->


 </div> <!--news container ends here-->


        </div>  <!--signup_screen ends here-->
        </div>  <!--end of hidden signup_div-->
<script>
$(document).ready(function() {

    $(".tab_content_form").hide();
    $(".tab_content_form:first").show();

    $("ul.tabs_form li").click(function() {
        console.log('clicked !');
        $("ul.tabs_form li").removeClass("active");
        $(this).addClass("active");
        $(".tab_content_form").hide();
        var activeTab = $(this).attr("rel");
        $("#"+activeTab).fadeIn();
    });
});
</script>

<script type="text/javascript">
$(document).ready(function(){
var j = jQuery.noConflict();

j(".inline1").colorbox({inline:true, width:"786px" ,height:"409px"});

});


</script>