Hide, show input using toggle jquery boolean

Question

I get input from dropdown list and depending on what user chose I want to show/hide different inputs. I have tried using toggle with boolean but it is not responding as it should.

My expectation I send true to toggle then it either shows the input or if it is already shown it stays that way. If I send false it hides or if it is hidden it stays that way.

As you can see both 'Parent' and 'Child' have the first values as true and when I switch from child to parent (the firstname is visible when the site loads) it hides and when I switch to administrator even though it is false it shows.

 $(document).ready(function () {
        var user = $("[id*=userTypeDD]").val();
        $("[id*=userTypeDD]").on("change", function () {
            user = $("[id*=userTypeDD]").val();
            hideInputFields(user);
        });
    });

    function hideUserInputFields(user) {
        if (user == "Child") {
            hideInputFields(true, true, false, false, false);
        }
        if (user == "Parent") {
            hideInputFields(true, true, true, true, true);
        }
        if (user == "Administrator") {
            hideInputFields(false, false, false, false, false);
        }
    }

    function hideInputFields(firstNameIsVisible, surnameIsVisible, postcodeIsVisible, telephoneIsVisible, emailIsVisible)
    {
        $("[id*=firstNameTxt]").closest("tr").toggle(firstNameIsVisible);

    }

Markup (ASP.NET)

<asp:DropDownList ID="userTypeDD" runat="server" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
    <asp:ListItem>Child</asp:ListItem>
    <asp:ListItem>Parent</asp:ListItem>
    <asp:ListItem>Administrator</asp:ListItem>
</asp:DropDownList>
    </td>
    <td>&nbsp;</td>
</tr>
<tr>
    <td class="text-right" style="width: 574px">
<asp:Label ID="firstNameLabel" runat="server" Text="First name: "></asp:Label>
    </td>
</tr>
</table>

Edit: It seems to me that it simply toggles TR everytime no matter the boolean value I pass to toggle

Answer 1

You're calling the wrong function in the on change event of your drop down. Change this...

$("[id*=userTypeDD]").on("change", function () {
        user = $("[id*=userTypeDD]").val();
        hideInputFields(user);
    });

To

$("[id*=userTypeDD]").on("change", function () {
        user = $("[id*=userTypeDD]").val();
        hideUserInputFields(user);
    });

This is why it's best to not name your functions so similarly. Your hideUserInputFields is a misleading name as it is not the function that does that. You would be better of calling it handleUserSelectionChange . Then you would probably not have had this mistake. Your other function name makes sense.