Question

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.

Answer 1

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

$('selector').css('display', 'none');