title: show/hide div after selected radio button
body: <p>I have three radio buttons and a div after each one like this:</p>
  
  <pre><code>&lt;input type="radio" name="radios" id="my_radio_1" value="" /&gt;
  &lt;div id="my_radio_1_text" style="display:none;"&gt;Content for radio 1&lt;/div&gt;
  
  &lt;input type="radio" name="radios" id="my_radio_2" value="" /&gt;
  &lt;div id="my_radio_2_text" style="display:none;"&gt;Content for radio 2&lt;/div&gt;
  
  &lt;input type="radio" name="radios" id="my_radio_3" value="" /&gt;
  &lt;div id="my_radio_3_text" style="display:none;"&gt;Content for radio 3&lt;/div&gt;
  </code></pre>
  
  <p>As you can see, the divs are initially hidden with <code>display:none;</code>. What I'm trying to do is to show the div right after each radio button when it is selected (and if a radio button is not selected, I want to hide the div after it). I can show the div after a radio button when it is selected by doing this:</p>
  
  <pre><code>$(document).on('change', 'input:radio[name=radios]', function(){
  
      $('#' + $(this).attr('id') + '_text').show();
  
  });
  </code></pre>
  
  <p>But I don't know how to hide the div when another radio button is selected. Any ideas please?</p>