Подскажите, пожалуйста. Есть 3 кнопки RadioButton, как сделать так, чтобы при нажатии на первую из них открывалась textarea, при нажатии на вторую select, при нажатии на третью все исчезало. Через jQuery, при помощи change()?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<form id="my_radio_box">
<label><input type="radio" name="radio" value="1"> Button 1</label>
<label><input type="radio" name="radio" value="2"> Button 2</label>
<label><input type="radio" name="radio" value="3"> Button 3</label>
</form>
<div class="block-text" id='block-1'>
<select>
<option value="a">Вариант 1</option>
<option value="b">Вариант 2</option>
<option value="c" selected>Вариант 3</option>
</select>
</div>
<textarea class="block-text" index rows="6" id='block-2' cols="26" >I love js</textarea>
<div class="block-text" id='block-3'></div>
<script>