How to toggle div visibility using radio buttons?

Question

I'm working on a project in which I have to toggle the visibility of a <div>.

I've got the following code:

<input type="radio" name="type" value="1"> Personal
<input type="radio" name="type" value="2"> Business

<div class="business-fields">
    <input type="text" name="company-name">
    <input type="text" name="vat-number">
</div>

I would like to togle the business-fields div. So, if none of the radio buttons, or the 'personal' radio button is selected: The div should be hidden. If the 'business' radio button is selected, I want it to show.

Currently, I am using this code:

$("input[name='type']").click(function() {
    var status = $(this).val();
    if (status == 2) {
        $(".business-fields").show();
    } else {
        $(".business-fields").hide();
    }
});

However, I was wondering if I can do this using the .toggle() function.

Answer 1

I usually tend not to use JS if possible, therefore here comes a HTML+CSS way approach.

.bussines-type .business-fields {
	display: none;
}

.bussines-type input[value="2"]:checked ~ .business-fields {
	display: block;
}

<div class="bussines-type">
	<input id="bt1" type="radio" name="type" value="1">
        <label for="bt1"> Personal</label>
	<input id="bt2" type="radio" name="type" value="2">
        <label for="bt2"> Business</label>

	<div class="business-fields">
		<input type="text" placeholder="Company name" name="company-name">
		<input type="text" placeholder="Vat number" name="vat-number">
	</div>
</div>

The ~ stands for any siblings, that are after the element we defined before the ~ sign.