Keeping Items hidden with JQuery

[#1]

Hello all,

I'm working on building some custom interface elements and interactions in a Qlikview sheet.

The client is interested in a basic content Carousel that scrolls through a few text boxes describing various sheets throughout the site and then linking to them. It seemed simple enough since QV supports jquery and every element gets a unique ID and class. However, I've run in to a problem:

I used CSS to position the elements stacked on top of one another. I then used Jquery to hide all but one of the elements (using "fadeIn" and "fadeOut" for my animations). I created buttons that call JS functions that will advance through the content by hiding the current frame and unhiding the next frame. At first test it seems to work well. However, when you click a background element, or any other element in the page, the hidden boxes pop back in to view. I've searched through my code repeatedly and I'm positive nothing in my code is causing this to happen. I've noticed that if I load up ANY qlikview project and click anywhere within it while in webview it's cause the cursor to change to the spinny "thinking" cursor for a fraction of a second. This leads me to believe that QV is using some kind of catch all script that detects a click anywhere on the page, and that it's somehow, unintentionally, unhiding all my elements.

Has anyone dealt with this? Does anyone know how to fix it?

[#2]

Update: It's still broken, but I've figure out that it's reverting to the state it was originally set in my CSS stylsheet.

For example. If I set them all to display: none in the style sheet, then use JS to unhide one, when I click a random element on the page all the text boxes disappear instead of appearing. It seems any click on the page is causing QV to reload the CSS stylesheet and reapply the styles.

[#3]

A work around that's working for now is I created two classes ".invisible" and ".visible" in my CSS. Using display: none and display:block respectively. I then have Jquery add the invisble class to all the elements that are hidden at the start and the visible class to the element that is showing. When the function is called to switch slides I have it fade out the current slide and apply the invisible class while applying the visible class to the next slide and then fading it in.

This works because when the system refreshes the CSS on a click the elements have a class applied that keeps them in their invisible/visible state.

It's messy and annoying, but it's working.