jQuery bind event doesn't consistently make CSS changes in UI Tabs -

i'm using function below change of css/html structure of page when default tab of jquery tabs selected. problem isn't "dynamic," , mean fires css in function - display:none on 2 selectors , width on #wrapper - after tab clicked , default tab clicked. , when other tabs clicked, css not restored original state.

jsfiddle: http://jsfiddle.net/yfs2v/33/

how can make fire when default tab loaded on page load , return css when other tabs clicked? there better way make markup changes determined active tab?

$(document).ready(function() {      var $tabs= $("#tabs").tabs();  $('#tabs').bind('tabsshow', function(event, ui) {        switch (ui.index){         case 0:              $('#col2, #footer').css('display', 'none');             $('#wrapper').css('width', '700px');     break;       }     }); 

you need tell revert original css.

$(document).ready(function() {     var $tabs = $("#tabs").tabs();      $('#tabs').bind('tabsshow', function(event, ui) {         //your original css goes here such $('#wrapper').css('width', '500px');         if(ui.index == 0) {             $('#col2, #footer').css('display', 'none');             $('#wrapper').css('width', '700px');         }     }); 

on tabshow function first revert original css checks if index 0 clicked, css change. otherwise original css not altered.