CODEWITHSUNDEEP
jquerycheckbox
Tauno
Tauno

Reputation: 3

jQuery: fadeToggle() and checkboxes

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

Upvotes: 0

Views: 539

Answers (2)

James Montagne
James Montagne

Reputation: 78650

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

http://jsfiddle.net/mYpsF/

Upvotes: 0

James Allardice
James Allardice

Reputation: 165971

Just make the checkbox initially checked if the image is visible, or make the image initially hidden and the checkbox unchecked.

See an example with the image hidden initially.

And an example with the image shown initially.

On a separate note, is there a reason you're using an attribute selector to select an element by id, rather than an id selector:

$('#pic1Div')

And as you can only have one element with any given id, you won't need the :first pseudo-selector either.

Upvotes: 1

Related Questions