[jQuery] Re: Checkbox hide/show

[Duncan Heal]

Hey
JS:
$(document).ready(function() {
$('.detail').hide(); // hide detail div

$('#showAll').toggle(function(){
        $('.detail').show();
                },function(){
        $('.detail').hide();
                });
}
);


HTML:
<input type="checkbox" title="Show All Fields" id="showAll"
name="showAll" value="showAllFields" class="showAll" />
<label for="showAll">Show All Fields</label>

<h2>What&rsquo;s New/Press Release Display Areas</h2>

<div class="detail">
<p>blah blah blah</p>
</div>

I've found toggle to be a good way of doing this type of thing.
http://docs.jquery.com/Events/toggle#fnfn

This will show/hide all divs with the class of detail. If you want to  
have the content slowly reveal rather than suddenly appear, use show 
("slow").

Greater minds will tell you why the checkbox doesn't become selected  
once clicked. I'd like to know myself.

Duncan
– – – – – – – – – – – – –
Sprocket Web Design
www.sprocket.co.nz
– – – – – – – – – – – – –

On 25/10/2007, at 7:51 AM, blg002 wrote:


I have and "Show All Fields" checkbox that I want to show all the divs
within an <div id=content> - ('#content div'). The input has a class
of showAll. How do i write the code so that it displays all the divs
when check and hides them all again when unchecked.

Thanks for your help.


<input type="checkbox" title="Show All Fields" id="showAll"
name="showAll" value="showAllFields" class="showAll" />
<label for="showAll">Show All Fields</label>

<div id="content">
<div>
<h2>What&rsquo;s New/Press Release Display Areas</h2>
</div>

<div >
<h2>Full Text</h2>
</div>
</div>