Question

Here’s the problem. I have a checkbox and when I select it an image should appear, so the div element is initially hidden. It just wouldn’t work. It works when the div is visible to start with. But in this case if I select the checkbox the image will disapper and when I unselect the checkbox the image will apper. I want exactly the opposite. The workaround would be to have checkboxes checked when page loads, but this will not be acceptable. Checkboxes should be unchecked and images hidden when page loads.

<div id="pic1Div">
<img src=pic1.jpg>
<br>
This should be visible when checkbox is checked
<br>It does exactly the opposite
</div>
<form>
Show Picture <input type=checkbox name="pic1">
</form>
<script>
$(':input[name="pic1"]:first').click(function() {
$('div[ID="pic1Div"]:first').fadeToggle("slow", "linear");
});
</script>

Here’s the source code

Answer 1

Don’t use visibility: hidden, fadeToggle works with display:none:

http://jsfiddle.net/mYpsF/