show & hide div by checkbox

Question

please say me, what's wrong ? we have many checkbox. OnClick any checkbox div "catdiv" must show with animate (bottom,0 %).

If checked checkbox is <1, "catdiv" must hide with animate...

<script>
$(':checkbox').on('change', function() {
$("#catdiv").animate ({bottom: "0%"), 500 );
});
</script>

Answer 1

You are using ID but maybe you need to use class ?

<script>
$(':checkbox').on('change', function() {
$(".catdiv").animate ({bottom: "0%"), 500 );
});
</script>

Answer 2

Try this:

$('input[type="checkbox"]').click(function() {
    $(".catdiv").animate({bottom: "0%"}, 500 );
});

• You can use $(this).is(':checked') to check whether the check box is checked or not.
• For the .catdiv , it should have " absolute " as position . You can use its ID or class to select it.