title: check if radio button is checked and display div
body: <p>i have tried <a href="https://stackoverflow.com/questions/1431726/css-selector-for-a-checked-radio-buttons-label">This from stackoverflow</a></p>
  
  <p>which i haven't been able to get to work..</p>
  
  <p>i have .playlist-list and .playlist-feature where only one should be displayed, with a radio button to check on. </p>
  
  <p>so which ever radio button is checked, it should display : block the div. and hide the other.</p>
  
  <p>but it is somehow not working.. </p>
  
  <p>I can start out with .playlist-feature being displayed fine, where i check on another button. but here it does not seem to work..</p>
  
  <p>any idea as to a solution to this ?</p>
  
  <p><strong>My code</strong>: </p>
  
  <p>html: </p>
  
  <pre><code>                    &lt;div class="playlist-top"&gt;
                          &lt;label for="playlist-button"&gt;Spilleliste&lt;/label&gt;
                          &lt;label for="playlist-feature-button"&gt;Indslag&lt;/label&gt;
                      &lt;/div&gt;
                      &lt;input type="radio" id="playlist-list-button" /&gt;
                      &lt;input type="radio" id="playlist-feature-button" /&gt;
                      &lt;div class="playlist-content"&gt;
                          &lt;div class="playlist-list"&gt;
                              &lt;ul class="bar"&gt;
                                  &lt;li&gt;
                                      &lt;span&gt;12:36&lt;/span &gt;&lt;p class="text-     uppercase"&gt;brian adams&lt;/p&gt;&lt;span class="dr-icon-audio-boxed"&gt;&lt;/span&gt;
                                      &lt;p&gt;You Belong to me&lt;/p&gt;
                                  &lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/div&gt;
                          &lt;div class="playlist-feature"&gt;
                              &lt;ul class="bar"&gt;
                                  &lt;li&gt;
                                      &lt;span&gt;08:51&lt;/span&gt;&lt;span class="dr-icon-audio-boxed"&gt;&lt;/span&gt;
                                      &lt;p&gt;Gærdesmutten er sej trods sin beskedne størrelse&lt;/p&gt;
                                  &lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  </code></pre>
  
  <p><strong>My CSS</strong> </p>
  
  <pre><code>    #playlist:checked ~div.playlist-toggle{
  
      .playlist-wrapper .container .playlist-content{
          .playlist-feature{
              display:block;
          }
      }
  
  }
  
  
  
  #playlist-list-button:checked ~div.playlist-toggle{
      .playlist-wrapper .container .playlist-content{
          .playlist-list{
              display:block;
          }
          .playlist-feature{
              display:none;
          }
      }
  }
  
  #playlist-feature-button:checked ~div.playlist-toggle{
      .playlist-wrapper .container .playlist-content{
          .playlist-feature{
              display:block;
          }
          .playlist-list{
              display:none;
          }
      }
  }
  </code></pre>