jQuery: Best way to show removed/hidden elements?

JavaScript
1

Hi all,

I’m currently doing a little function which will remove tbodies from a table depending on a value selected in a drop down menu, the only issue is that I’m not really sure how to “reset” the function each time I pick a new value. As it is now, once an element is removed - it won’t show up if I pick the item in the drop down menu. Any suggestions?

Code below:

jQuery(document).ready(function() {
	var city = document.getElementById('changeCity');
	city.onchange = function() {
		var selected = this.options[this.selectedIndex];
		cityName = selected.getAttribute('value');
		switch(cityName) {
		case "london":
			jQuery('#calendar tbody').not(':contains("London"), :first').hide();
			jQuery('#calendar h2').replaceWith('<h2>London</h2>');
			break;
		case "tokyo":
			jQuery('#calendar tbody').not(':contains("Tokyo"), :first').hide();
			jQuery('#calendar h2').replaceWith('<h2>Tokyo</h2>');
			break;
		case "newyork":
			jQuery('#calendar tbody').not(':contains("New York"), :first').hide();
			jQuery('#calendar h2').replaceWith('<h2>New York</h2>');
			break;
		case "rest":
			jQuery('#calendar tbody').hide(':contains("London"), :contains("Tokyo"), :contains("New York")');
			jQuery('#calendar h2').replaceWith('<h2>Other cities</h2>');
			break;
		}
	}
});
2

Hey, there are two options (that I know of), you could use if-clauses and use the opposite of “hide” - being “show”.

But alot easier is the jQuery.toggle(showhide) (http://api.jquery.com/toggle/) method.

From the jQuery api:

With no parameters, the .toggle() method simply toggles the visibility of elements:

$(‘.target’).toggle();

The matched elements will be revealed or hidden immediately, with no animation, by changing the CSS display property. If the element is initially displayed, it will be hidden; if hidden, it will be shown. The display property is saved and restored as needed. If an element has a display value of inline, then is hidden and shown, it will once again be displayed inline.

Hope that helps

3

Thanks behati,

Just solved it a minute ago. Probably not the best way, but it work: I just placed a jQuery(‘#calendar tbody’).show(); right at the beginning of the anonymous function. So on each change it would first show everything and then continues with hiding unwanted elements. :slight_smile:

But there’s another issue… The last one, which should display everthing else, removes everything. However, if I use remove rather than hide it works fine. And I have basically no idea how to fix that.

4

Doesn’t sound like the best of solutions, but if it’s a relatively small table I guess it won’t be a problem really (performance wise) :slight_smile:

That sounds very odd! Is your method maybe trying to hide elements that are already hidden? It could be the same as above, calling .hide() on a hidden object would have little effect, while .remove() is different. All in all it still sounds to me like .toggle() would be a much easier way to go!

5

Haha no, but it’s a temporarily solution until I’ve learned some PHP so I can create my own database to output the information correctly rather than doing it this way. :slight_smile:

It’s this part that doesn’t work:

	case "rest":
		jQuery('#calendar tbody').hide(':contains("London"), :contains("Tokyo"), :contains("New York")');
		jQuery('#calendar h2').replaceWith('&lt;h2&gt;Other cities&lt;/h2&gt;');
		break;

For some reason, it hides all tbody tags. That’s what I can’t figure out. I’m gonna see if I can use toggle for this little function.