Question

In my code below, when I select the radio button marked ‘yes’ it does slide down. But when I click on the one marked ‘no’ it doesn’t slide up. Why is this?

html:

<label>Yes</label><input type="radio" name="teacher" id="teacher" value="yes"/>
<label>No</label><input type="radio" name="teacher" id="teacher" value="no"/><br>

jquery:

$("#teacher").click(function() {    
    if($(this).val() === "yes")
    {
        $("#teacher-info").slideDown();
    }
    else if($(this).val() === "no")
    {
        $("#teacher-info").slideUp();
    }
});

Answer 1

You have two elements with an id of teacher.

id is meant to be a unique property (only one element has one particular id) and jQuery assumes that to be true. If you have two elements with the same id, jQuery always picks the first one.

That being said, the solution to your problem is to change the id to a class, which is designed to be used for many elements.

HTML:

<label>Yes</label>
<input type="radio" name="teacher" class="teacher" value="yes"/>

<label>No</label>
<input type="radio" name="teacher" class="teacher" value="no"/>

JavaScript:

$(".teacher").click(function() {    
    if($(this).val() === "yes")
    {
        $("#teacher-info").slideDown();
    }
    else if($(this).val() === "no")
    {
        $("#teacher-info").slideUp();
    }
});

By the way, since your radio buttons have only two states (yes and no), your code can be simplified:

$(".teacher").click(function() {    
    if ($(this).val() === "yes") {
        $("#teacher-info").slideDown();
    } else {
        $("#teacher-info").slideUp();
    }
});