lundi 16 février 2015

Show/Hide All or Toggle Multiple divs With One Checkbox

Forgive me if this topic has been overdone. I've read through lots of posts and haven't quite found what I'm looking for, which is why I'm asking.


I want to have one checkbox that says "Show All" and when you check it multiple divs show. When you uncheck it, the divs hide


I was able to show/hide one div with an id using a checkbox, but I'm not sure how to use a class element so I don't have to write out every div id. This is the code I was using:



<input type="checkbox" id="checkbox">Show All
<div id="links"><a href="#">Link Title</a></div>


AND



$(document).ready(function () {

$('#link').hide();


$('#checkbox').change(function () {
if (!this.checked)
// ^
$('#links').fadeOut('slow');
else
$('#links').fadeIn('slow');
});
});


How do I approach this with the javascript so I can show multiple divs on one checkbox click? Maybe with a class like this:



<input type="checkbox" id="checkbox">Show All
<div class="links"><a href="#">Link Title</a></div>
<div class="links"><a href="#">Link Title</a></div>
<div class="links"><a href="#">Link Title</a></div>


Thanks!





Aucun commentaire:

Enregistrer un commentaire