Search results using jquery UI Tabs

Question

I am using the Jquery UI Tabs for listing and grouping different types of search results content.

The tool is awesome, but in some cases it behaves unexpectedly.

This is an example of the expected behaviour:

http://www.acidi.gov.pt/pesquisa/porto ?

And this is an example of the odd behaviour:

http://www.acidi.gov.pt/pesquisa/mudan%C3%A7a ?

For some reason, using some search strings, the browser ignores the ui-tabs-hide class on the other tabs results, listing all of the different types of results in the same page.

I thought it might be an unclosed div tag, but I couldn't find any. I have no idea why this behaviour happens.

Can anyone help me, please?

Answer 1

I think the problem is not on the jQuery side but on the CSS side. The not working version is missing the jQuery UI CSS classes like ui-tabs-hide . jQuery UI is switching CSS classes for displaying and and not displaying the content of the tabs.

if you only use .ui-tabs-hide { display:none !important; } .ui-tabs-hide { display:none !important; } it will work.

Answer 2

In your code there is a </div> that shouldn't be there :

<li><h2><a href="#search-faqs">FAQs</a></h2></li> 
                                                        </ul> </div> 

If you look the working page, it's not present.

"#search-claiis">CLAIIs</a></h2></li> 
</ul> 
<div id="search-acidi"> 

The result is that you make an "empty" tab, can be seen using firebug. And put your text below.