title: Javascript checkbox toggle div hide show
body: <p>I am looking to have a checkbox (Football) that when </p>
  
  <p>Unchecked:</p>
  
  <ul>
  <li>displays one DIV (FootballChoice) containing a label image for the checkbox that changes with mouseover</li>
  </ul>
  
  <p>Checked:</p>
  
  <ul>
  <li>hides the DIV (FootballChoice)</li>
  <li>shows a hidden DIV (FootballChecked) that contains an alternate label image</li>
  <li>shows another hidden DIV (FootballTeams).</li>
  </ul>
  
  <p>When unchecked again, this needs to return to it's original state.</p>
  
  <p>Alternatively if anyone knows how to change the label image when checked to the same as the one specified in the mouseover element here, that would also be a usefull altetrnative?</p>
  
  <p>Thank you in advance.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;script type="text/javascript" src="http://code.jquery.com/jquery.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
    
    $(document).ready(function(){
      $('input[type="checkbox"]').click(function(){
        
        if($(this).attr("value")=="FootballTeams"){
          $(".FootballTeams").toggle();
          $(".FootballChecked").toggle();
          $(".FootballChoice").toggle();
          
        }
      });
    });
  
  &lt;/script&gt;</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.FootballChecked {
    display: none;
  }
  
  .FootballChoice {
    display: show;
  }
  
  .sport {
    display: none; 
    border: 1px dashed #FF3333; 
    margin: 10px; 
    padding: 10px; 
    background: #003366;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input id="Football" type="checkbox" value="FootballTeams"&gt;
  
  &lt;div class="FootballChoice"&gt;
    &lt;label for="Football" class="FootballChoice"&gt;
      &lt;img src="http://web.static.nowtv.com/email-marketing/assets/structure/SPORTSPREF_FOOTBALL_100x130.png" onmouseover="this.src='http://web.static.nowtv.com/email-marketing/assets/structure/SPORTSPREF_FOOTBALL_NAME_100x130.png';"                  onmouseout="this.src='http://web.static.nowtv.com/email-marketing/assets/structure/SPORTSPREF_FOOTBALL_100x130.png';" alt="Football" title="Football"&gt;
    &lt;/label&gt;
  &lt;/div&gt;
            
  &lt;div class="FootballChecked"&gt;
    &lt;label for="Football"&gt;
      &lt;img src="http://web.static.nowtv.com/email-marketing/assets/structure/SPORTSPREF_FOOTBALL_NAME_100x130.png" alt="Football" title="Football"&gt;
    &lt;/label&gt;
  &lt;/div&gt;
  
  &lt;div class="sport FootballTeams"&gt;
    Football Teams here
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>