Javascript checkbox toggle div hide show

I am looking to have a checkbox (Football) that when

Unchecked:

• displays one DIV (FootballChoice) containing a label image for the checkbox that changes with mouseover

Checked:

• hides the DIV (FootballChoice)
• shows a hidden DIV (FootballChecked) that contains an alternate label image
• shows another hidden DIV (FootballTeams).

When unchecked again, this needs to return to it's original state.

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?

Thank you in advance.

<script type="text/javascript" src="http://ift.tt/IJSC3o"></script>
<script type="text/javascript">
  
  $(document).ready(function(){
    $('input[type="checkbox"]').click(function(){
      
      if($(this).attr("value")=="FootballTeams"){
        $(".FootballTeams").toggle();
        $(".FootballChecked").toggle();
        $(".FootballChoice").toggle();
        
      }
    });
  });

</script>

.FootballChecked {
  display: none;
}

.FootballChoice {
  display: show;
}

.sport {
  display: none; 
  border: 1px dashed #FF3333; 
  margin: 10px; 
  padding: 10px; 
  background: #003366;
}

<input id="Football" type="checkbox" value="FootballTeams">

<div class="FootballChoice">
  <label for="Football" class="FootballChoice">
    <img src="http://ift.tt/1J8vwAP" onmouseover="this.src='http://ift.tt/1GHmq0B';"                  onmouseout="this.src='http://ift.tt/1J8vwAP';" alt="Football" title="Football">
  </label>
</div>
          
<div class="FootballChecked">
  <label for="Football">
    <img src="http://ift.tt/1GHmq0B" alt="Football" title="Football">
  </label>
</div>

<div class="sport FootballTeams">
  Football Teams here
</div>