CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Connor Wyatt
Connor Wyatt

Reputation: 156

jQuery slideIn slideOut

I have a form that will allow clients to specify their availability throughout the week, and I want it to show all the days of the week and when you check the box next to each day a div should slide down below the day to allow people to choose which times they are available for that day. Here is the HTML for Monday:

The script I have written to make the div start hidden (top) and the one that should respond to the checkbox being clicked (bottom) is like this:

<div class="availability_day">
    <label for="monday" class="label_day">Monday</label>
<input type="checkbox" name="availability_day" id="mondaycheck" value="monday">
</div>

<div id="mondaydiv" style="margin-top:10px;">
    <span class="label_availability">Availability</span>
    <input type="checkbox" name="availability_monday" id="monday_morning" value="morning">
    <label for="morning">Morning</label>
    <input type="checkbox" name="availability_monday" id="monday_afternoon" value="afternoon">
    <label for="afternoon">Afternoon</label>
    <input type="checkbox" name="availability_monday" id="monday_evening" value="evening">
    <label for="evening">Evening</label>
    <label for="availability_monday_comments" class="label">Comments</label>
    <textarea name="availability_monday_comments" type="text" id="availability_monday_comments" rows="2" style="width:288px;"></textarea>
</div>


<script>
    jQuery(document).ready(function() {
        jQuery('#mondaydiv').slideUp('fast');
    });
</script>



<script>
    jQuery(document).ready(function() {
        jQuery('#mondaycheck').click(function() {
            if (jQuery(this).attr('checked')) {
                jQuery('#mondaydiv').slideDown('fast');
            } else {
                jQuery('#mondaydiv').slideUp('fast');
            }
        }); // end click
    }); // end function
</script>

It just isn't working though. The first script runs fine and collapses all the divs but the second script is not working, the div doesn't expand when the checkbox is ticked.

P.S. I am not using the $ sign because I keep getting errors so I just use jQuery now instead.

Thank you

Upvotes: 0

Views: 2137

Answers (1)

Roko C. Buljan
Roko C. Buljan

Reputation: 205987

jsBin demo

jQuery(function( $ ) {

  // Spare your fingers, you can now use freely the $ alias.

  $('#mondaydiv').slideUp('fast');

  $('#mondaycheck').click(function() {
      $('#mondaydiv').slideToggle( !this.checked );
  }); 

});

Upvotes: 1

Related Questions