title: Div radio buttons
body: <p>I have seen a few answers on here and the web but as I need to ask something else I have made this question. + I cant seem to get anything to work.</p>
  
  <p>So what I'm after is <code>Yes</code> and <code>No</code> options, these will be buttons and when pressed they will stay active as they will make a <code>div</code> appear on the page depending on there value.</p>
  
  <p>E.G:</p>
  
  <p>Yes = <code>&lt;div id="won"&gt;You won&lt;/div&gt;</code></p>
  
  <p>No = <code>&lt;div id="lose"&gt;You lost&lt;/div&gt;</code></p>
  
  <p>These divs will appear under the buttons. My question is how can I get the value from a div? I tried to use radio buttons inside to get this working but I cant seem to do it. </p>
  
  <p>What I have so far.</p>
  
  <h2>HTML:</h2>
  
  <pre><code>&lt;div class="buttonHolder"&gt;
      &lt;div class="option"&gt;Yes
          &lt;input id="yes" type="radio" /&gt;
      &lt;/div&gt;
      &lt;div class="option"&gt;No
          &lt;input id="no" type="radio" /&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h2>CSS:</h2>
  
  <pre><code>div {
      outline: 1px solid;
  }
  .buttonHolder {
      width: 400px;
      height: 150px;
  }
  .buttonHolder1 {
      background: red;
  }
  .option {
      width: 50%;
      height: 100%;
      float: left;
      background: #eee;
      cursor:pointer;
  }
  .optiontest {
      background: #fff;
  }
  </code></pre>
  
  <h2>jQuery:</h2>
  
  <pre><code>$('.option').click(function () {
      var $this = $(this);
      var input = $this.find('input');
      $('.optiontest').toggleClass('optiontest');
      $(input).prop('checked', true);
      $(this).toggleClass('optiontest');
  
  });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/Ruddy/bNNA6/" rel="nofollow"><strong>DEMO HERE</strong></a></p>
  
  <p>So the buttons will look like that and change background when pressed as well as bringing up another question etc... There will be multiply questions and answers on the same page.</p>
  
  <h1>Edit:</h1>
  
  <p>Forgot to add that I would like the radio button not visible, so it looks like the <code>div</code> is selected and there is no radio button. Apologises for not adding that when writing the question.</p>