Question

I’m displaying HTML divs on and off using Dojo and CSS, but I’m having a strange result only in Google Chrome (all’s fine in IE8+ and the latest FireFox).

Here’s the code using Dojo 1.8 :

http://jsfiddle.net/XUzCN/

When you check “Show 2” (either the label or box), the “Content 2.” div doesn’t show.
If you uncheck “Show 3”, “Content 3.” hides but “Content 2” magically appears!
The only way to make the divs display correctly is to toggle the display of the first div, “Content 1”. Again, all is well in IE and FF.

By the way, I’m sticking to the CSS classes “isVisible” and “isHidden” because I have other things to do with them after. Anyway, I’ve tried with this but the results are the same :

query("div#div" + divNum).style("display", "inline");

Any help will be greatly appreciated!

Answer 1

Several hours later, I’ve found a way to fix my problem.
Instead of applying “display:inline” to show the hidden divs, I only have to remove the “display:none” style.

Using my CSS classes, I only had to alter the “.isVisible” :

.isVisible {}
.isHidden {display:none;}

http://jsfiddle.net/XUzCN/11/

Replacing the .isHidden class with .isVisible now works perfectly!