CODEWITHSUNDEEP
jqueryjquery-ui-tabs
markratledge
markratledge

Reputation: 17561

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

I'm using the function below to change the some of the CSS/HTML structure of a page when the default tab of jQuery Tabs is selected. Problem is that it isn't "dynamic," and by that I mean it only fires the CSS in the function - the display:none on two selectors and the width on #wrapper - after another tab is clicked and then the default tab is clicked. And when other tabs are clicked, the CSS is not restored to the original state.

jsfiddle: http://jsfiddle.net/Yfs2V/33/

How can I make this fire when the default tab is loaded on page load and also return the CSS when other tabs are clicked? Is there a better way to make markup changes as determined by the 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;
      }
    });

Upvotes: 1

Views: 234

Answers (1)

Hussein
Hussein

Reputation: 42818

You need to tell it to revert back to original CSS.

$(document).ready(function() {
    var $tabs = $("#tabs").tabs();

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

On tabshow the function will first revert back to original CSS then checks if index 0 is clicked, CSS will change. Otherwise original CSS will not be altered.

Upvotes: 4

Related Questions