title: Show and hide div on clicking image or radio button
body: <p>I have multiple images and their respective radio button. By clicking on an image or radio button their respective show and hide div is displaying.</p>
  
  <p>But I am not able to achieve:</p>
  
  <ol>
  <li><p>By clicking on the image the respective radio button should also select (have value true) when the text is showing</p></li>
  <li><p>When the text is hiding then the radio button should have value false.</p></li>
  </ol>
  
  <p>I have code so far as below:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/flower-icon.png" alt="" onclick="Show_Div(Div_1)" width="100px"&gt;
  &lt;p&gt;
    &lt;input type="radio" onclick="Show_Div(Div_1)"&gt;Flower 1&lt;/p&gt;
  &lt;div id="Div_1" style="display: none;"&gt;
    Flower is pink.
  &lt;/div&gt;
  &lt;br/&gt;
  &lt;br/&gt;
  
  &lt;img src="http://www.clker.com/cliparts/0/d/w/v/V/p/pink-flower-md.png" alt="" onclick="Show_Div(Div_2)" width="100px"&gt;
  &lt;p&gt;
    &lt;input type="radio" onclick="Show_Div(Div_2)"&gt;Flower 2&lt;/p&gt;
  &lt;div id="Div_2" style="display: none;"&gt;
    Flower is orange.
  &lt;/div&gt;
  </code></pre>
  
  <h3>JavaScript code</h3>
  
  <pre><code>function Show_Div(Div_id) {
    if (false == $(Div_id).is(':visible')) {
      $(Div_id).show(250);
    } else {
      $(Div_id).hide(250);
    }
  }
  </code></pre>