title: Show/Hide images based on tab selection
body: <p>I have some tab set up and I'm having a hard time figuring how to show/hide images depending on which tab is selected.  When the page loads tab1 and img1 are visible.  When I click on tab2 I want to hide img1 and show img2 etc.</p>
  
  <p>This example shows what I have so far:
  <a href="http://jsfiddle.net/NbyXb/" rel="nofollow">http://jsfiddle.net/NbyXb/</a></p>
  
  <p>Here is the HTML:</p>
  
  <pre><code>&lt;div id="tab-area" class="light"&gt;
  
      &lt;div class="dummy" id="first"&gt;
          &lt;input type="radio" name="pane" id="p1" /&gt;
          &lt;div class="dummy" id="second"&gt;
              &lt;input type="radio" name="pane" id="p2" /&gt;
              &lt;div class="dummy" id="third"&gt;
                  &lt;input type="radio" name="pane" id="p3" /&gt;
                  &lt;div class="dummy" id="fourth"&gt;
                      &lt;input type="radio" name="pane" id="p4" /&gt;
                      &lt;div class="dummy"&gt;
  
                          &lt;ul class="tabs"&gt;                       
                              &lt;li id="tab1"&gt;&lt;span class="active" tabindex="1"&gt;&lt;/span&gt;&lt;label for="p1"&gt;Tab1&lt;/label&gt;&lt;/li&gt;
                              &lt;li id="tab2"&gt;&lt;span class="active" tabindex="1"&gt;&lt;/span&gt;&lt;label for="p2"&gt;Tab2&lt;/label&gt;&lt;/li&gt;
                              &lt;li id="tab3"&gt;&lt;span class="active" tabindex="1"&gt;&lt;/span&gt;&lt;label for="p3"&gt;Tab3&lt;/label&gt;&lt;/li&gt;
                              &lt;li id="tab4"&gt;&lt;span class="active" tabindex="1"&gt;&lt;/span&gt;&lt;label for="p4"&gt;Tab4&lt;/label&gt;&lt;/li&gt; 
                          &lt;/ul&gt;
  
                          &lt;div class="tab-strip"&gt;&lt;/div&gt;
  
                          &lt;div class="panes-scroll"&gt;
                              &lt;div class="panes-items"&gt;
                                  &lt;div id="pane1"&gt;
                                      &lt;h2&gt;Tab 1 area&lt;/h2&gt;        
                                  &lt;/div&gt;
  
                                  &lt;div id="pane2"&gt;
                                      &lt;h2&gt;Tab 2 area&lt;/h2&gt;
                                  &lt;/div&gt;
  
                                  &lt;div id="pane3"&gt;
                                      &lt;h2&gt;Tab 3 area&lt;/h2&gt;
                                  &lt;/div&gt;
  
                                  &lt;div id="pane4"&gt;
                                      &lt;h2&gt;Tab 3 area&lt;/h2&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt; &lt;!-- end of .panes-items --&gt;
                          &lt;/div&gt;  &lt;!-- end of .panes-scroll --&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;  &lt;!-- end #fourth --&gt;
              &lt;/div&gt;  &lt;!-- end #third --&gt;
          &lt;/div&gt;  &lt;!-- end #second --&gt;
      &lt;/div&gt;  &lt;!-- end #first --&gt;
  &lt;/div&gt; &lt;!--end of #tab-area--&gt;
  
  &lt;div class="images"&gt;
      &lt;img id="tab1-img" src="images/img1.png"&gt;
      &lt;img id="tab2-img" src="images/img2.png"&gt;
      &lt;img id="tab3-img" src="images/img3.png"&gt;
      &lt;img id="tab4-img" src="images/img4.png"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the CSS:</p>
  
  <pre><code>#tab-area {
      margin: 40px;
  }
  
  .dummy {
      outline: none;  /* For IE */
  }
  
  input[name=pane] { display: none;}
  
  .tabs {
      position: relative;
      list-style: none;
  }
  
  .tabs li {
      position: relative;
      width: 100px;
      height: 38px;
      float: left;
      font: bold 14px Arial, sans serif;
      letter-spacing: 1px;
  }
  
  .tabs li:first-child {
      margin-left: 30px;
  }
  
  .tabs li:last-child {
  }
  
  .tabs li .active:before {
      content: '';
      position: absolute;
      top: 40px;
      left: -10px;
      width: 10px;
      height: 8px;
  }
  
  .tabs li .active:after {
      content: '';
      position: absolute;
      top: 40px;
      left: 107px;
      width: 10px;
      height: 8px;
  }
  
  .tab-strip {
      content: '';
      position: relative;
      clear: both;
      z-index: 1;
      height: 10px;
      width: 700px;
  }
  
  .panes-scroll {
      width: 698px;
      position: relative;
      overflow: hidden;
      border: 1px solid #aaa;
      height: 250px;
  }
  
  .panes-items {
      width: 2800px;
      position: relative;
      -webkit-transition: margin-left 500ms ease-in-out;
      -moz-transition: margin-left 500ms ease-in-out;
      -o-transition: margin-left 500ms ease-in-out;
      -ms-transition: margin-left 500ms ease-in-out;
      transition: margin-left 500ms ease-in-out;
  }
  
  .panes-items &gt; div {
      padding: 20px;
      width: 660px;
      height: 0;
      font: 12px Arial, sans serif;
      float: left;
  }
  
  .panes-items &gt; div:first-of-type { height: auto; }
  .tabs li:first-child .active { display: block;}
  
  input[name=pane]:checked + .dummy .panes-items &gt; div { height: 0; }
  input[name=pane]:checked + .dummy .tabs li .active { display: none;}
  
  #p1:checked + .dummy .panes-items { 
      margin-left: 0;
  }
  #p2:checked + .dummy .panes-items {
      margin-left: -700px;
  }
  #p3:checked + .dummy .panes-items {
      margin-left: -1400px;
  }
  #p4:checked + .dummy .panes-items {
      margin-left: -2100px;
  }
  
  #p1:checked + .dummy .panes-items &gt; div:nth-of-type(1) ,
  #p2:checked + .dummy .panes-items &gt; div:nth-of-type(2) ,
  #p3:checked + .dummy .panes-items &gt; div:nth-of-type(3) ,
  #p4:checked + .dummy .panes-items &gt; div:nth-of-type(4) {
      height: auto;
  }
  
  #p1:checked + .dummy .tabs li:nth-child(1) .active,
  #p2:checked + .dummy .tabs li:nth-child(2) .active,
  #p3:checked + .dummy .tabs li:nth-child(3) .active,
  #p4:checked + .dummy .tabs li:nth-child(4) .active {
      display: block;
  }
  
  #tab1-img {
      display: block;
  }
  #tab2-img {
      display: none;
  }
  #tab3-img {
      display: none;
  }
  #tab4-img {
      display: none;
  }
  </code></pre>