Automatically adjust jquery colorbox height -

i have collapsable content within colorbox popup.

i set width 'auto' works automatic width how automatic height? example when colorbox pops up, fits first image when click image second collapsable image, window doesn't resize. possible?

html

<p><a class='inline' href="#inline_content"><img src="http://www.paycoservices.co.uk/images/find-scheme.png" alt="find scheme" /></a></p>  <div style='display:none'>         <div id='inline_content' style='padding:10px; background:#fff;'>         <div class="two-step"> <a href="#"><img src="http://www.paycoservices.co.uk/images/2-step-sfinder.png" width="990" height="100"  class="show_hide" alt="3 steps" /></a> </div>  <div class="slidingdiv"> <img src="http://www.paycoservices.co.uk/images/step1.png" width="60" height="58" class="show_hide" alt="step 1" /> <font color=white><strong><h3>i want employment status be:</h3></strong></font> <a href="#"  class="show_hide"></a> <div id="question_1"> <a href="#"><img src="http://www.paycoservices.co.uk/images/umbrella-emp.png" style="margin-left:80px;" width="300" height="118" class="first_s"  alt="umbrella employee" />    </a> <a href="#"><img src="http://www.paycoservices.co.uk/images/self-employed.png" style="margin-left:170px;" width="300"  height="118" class="second_s" alt="self employed" />   </a> </div> </div> </div </div> 

js

 $(document).ready(function(){                 //examples of how assign colorbox event elements                 $(".group1").colorbox({rel:'group1'});                 $(".group2").colorbox({rel:'group2', transition:"fade"});                 $(".group3").colorbox({rel:'group3', transition:"none",  width:"75%", height:"75%"});                 $(".group4").colorbox({rel:'group4', slideshow:true});                 $(".ajax").colorbox();                 $(".youtube").colorbox({iframe:true, innerwidth:640,  innerheight:390});                 $(".vimeo").colorbox({iframe:true, innerwidth:500,  innerheight:409});                 $(".iframe").colorbox({iframe:true, width:"80%",  height:"80%"});                 $(".inline").colorbox({inline:true, width:"auto"});                 $(".callbacks").colorbox({                     onopen:function(){ alert('onopen: colorbox  open'); },                     onload:function(){ alert('onload: colorbox has started  load targeted content'); },                     oncomplete:function(){ alert('oncomplete: colorbox has  displayed loaded content'); },                     oncleanup:function(){ alert('oncleanup: colorbox has  begun close process'); },                     onclosed:function(){ alert('onclosed: colorbox has  closed'); }                 });                  $('.non-retina').colorbox({rel:'group5', transition:'none'})                 $('.retina').colorbox({rel:'group5', transition:'none',  retinaimage:true, retinaurl:true});                  //example of preserving javascript event inline calls.                 $("#click").click(function(){                      $('#click').css({"background-color":"#f00",  "color":"#fff", "cursor":"inherit"}).text("open window again , message still  here.");                     return false;                 });     });      $(document).ready(function(){          // @ first hide divs         $(".slidingdiv").hide();         $(".slidingdiv2").hide();          $(".slidingdiv3").hide();         $(".slidingdiv4").hide();         $(".slidingdiv5").hide();         $(".slidingdiv6").hide();         $(".slidingdiv7").hide();         $(".slidingdiv8").hide();         $(".slidingdiv9").hide();         $(".slidingdiv10").hide();         $(".show_hide").show();      $('.show_hide').click(function(){     $(".slidingdiv").slidetoggle();     });     $('.first_s').live('click', function(){        $(".slidingdiv2").slidetoggle();     })     $('.second_s').live('click', function(){         $(".slidingdiv3").slidetoggle();     })       $('.third_s').live('click', function(){         $(".slidingdiv4").slidetoggle();     })      $('.fourth_s').live('click', function(){         $(".slidingdiv5").slidetoggle();     })      $('.fifth_s').live('click', function(){         $(".slidingdiv6").slidetoggle();     })       $('.sixth_s').live('click', function(){         $(".slidingdiv7").slidetoggle();     })       $('.seventh_s').live('click', function(){         $(".slidingdiv8").slidetoggle();     })        $('.eighth_s').live('click', function(){        $(".slidingdiv9").slidetoggle();     })        $('.ninth_s').live('click', function(){         $(".slidingdiv10").slidetoggle();     })      }); 

fiddle

look complete solution, work perfectly.=> fiddle (new)

here, script adjust margin-top center content.

you can show multiple steps <a gotostep="2">...</a> , <div step="2">...</div> , hide other multiple steps <a closestep="2">...</a> , that's simple use... can things @ same time <a gotostep="4,5" closestep="1,3">...</a>

for responsive colorbox, can maxwidth :

$(".group1").colorbox({rel:'group1', maxwidth:'100%'}); 

all in fiddle..