2

Probably best to explain with an example:

<div id="tab-1">
  <input name="1" type="text" />
  <input name="2" type="text" />
  <input name="3" type="text" />
<div>
<div id="tab-2">
  <input name="4" type="text" />
  <input name="5" type="text" />
  <input name="6" type="text" />
<div>

I'm using the Jquery Tools "Tabs" tool. This toggles the visibility of the two divs above so that only one shows at a time.

The problem is as follows:

  1. The user Switches to tab 2. This hides tab-1, and fields 1 through 3. This also shows tab-2 and its children, fields 4 through 6.

  2. The user takes an action on tab-2 that should remove field 2 from the now hidden tab-1. I'm using $('#field-2').hide(0);

This should hide field two, but does nothing since field two is already hidden. That's fine for now.

3.The user switches back to tab-1.

Actual result: All three fields, including field 2, are now visible again.

Desired result: Fields 1 and 3 are now visible, but switching to tab-1 does not un-hide field 2, since it was explicitly hidden by a function. Field 2 should stay hidden until explicitly unhidden.

I'm thinking I may be able to circumvent this by assigning a special css class to the field with display:none;, but I was wondering if there's a better solution to show/hide independatly of the tab the element is on without assigning extra css classes.

Nick
  • 10,904
  • 10
  • 49
  • 78

1 Answers1

1

It appears to work if you actually change the element's display style, instead of using hide:

$('selector').css('display', 'none');
sdleihssirhc
  • 42,000
  • 6
  • 53
  • 67
  • This works, thank you. Although its bizarre since the .hide() method does the same thing.... – Nick Nov 14 '11 at 19:22
  • 1
    @Nick My guess is that `hide` first checks to see if the element is visible before it does anything. If it isn't (if, for example, its parent is already hidden), then it does nothing? Sure, why not. – sdleihssirhc Nov 14 '11 at 20:23