title: Show popup on clicking label, and change popup contents based on label
body: <p>I have a popup which displays upon clicking any label in <code>#nav</code>; however, I want different content to appear inside depending on which label is clicked. Currently, the different popup content divs will all hide or show based off CSS only (e.g. my jQuery selector might be wrong). How do I fix this? Would I be better off adding/removing active classes instead of using a radio setup? Thanks!</p>
  <p>UPDATE1: With the typo indicated from comments fixed, it would seem my issue now is not displaying the other, unchecked-radio targets.</p>
  <p>UPDATE2: Adding <code>$('[id^=&quot;c-&quot;]').hide();</code> appears to correctly display only one target div; however, it seems to require two clicks to work. (One click will display the popup's previous state, e.g. empty if nothing was clicked yet, or <code>#c-ask</code> if its label was the last one clicked.)</p>
  <p><strong>HTML:</strong></p>
  <pre class="lang-html prettyprint-override"><code>&lt;input hidden type=&quot;radio&quot; id=&quot;ask&quot; name=&quot;popinfo&quot;/&gt;
  &lt;input hidden type=&quot;radio&quot; id=&quot;sub&quot; name=&quot;popinfo&quot;/&gt;
  &lt;input hidden type=&quot;radio&quot; id=&quot;mnu&quot; name=&quot;popinfo&quot;/&gt;
  &lt;div id=&quot;fade&quot;&gt;
      &lt;div id=&quot;popup&quot;&gt;
          &lt;div id=&quot;c-ask&quot;&gt;ask&lt;/div&gt;
          &lt;div id=&quot;c-sub&quot;&gt;sub&lt;/div&gt;
          &lt;div id=&quot;c-mnu&quot;&gt;mnu&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;section id=&quot;splash&quot;&gt;
      &lt;div class=&quot;info&quot;&gt;
          // 
      &lt;/div&gt;
      &lt;div id=&quot;nav&quot;&gt;
          &lt;i class=&quot;fa fa-home&quot;&gt;&lt;/i&gt;
          &lt;label for=&quot;ask&quot;&gt;&lt;i class=&quot;fa fa-envelope&quot;&gt;&lt;/i&gt;&lt;/label&gt;
          &lt;i class=&quot;fa fa-user&quot;&gt;&lt;/i&gt;
          &lt;label for=&quot;sub&quot;&gt;&lt;i class=&quot;fas fa-edit&quot;&gt;&lt;/i&gt;&lt;/label&gt;
          &lt;label for=&quot;mnu&quot;&gt;&lt;i class=&quot;fas fa-plus&quot;&gt;&lt;/i&gt;&lt;/label&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  <p><strong>CSS:</strong></p>
  <pre class="lang-css prettyprint-override"><code>#splash {
      width:100%;
      height:100vh;
      background:#ff0;
      display:flex;
      flex-direction:column;
      justify-content:center;
      align-items:center;
      text-align: center;
  }
  
  .info {margin: auto;}
  
  #nav {
      margin-bottom:0;
      display:flex;
      flex-direction:row;
      justify-content:center;
      align-items:center;
      justify-content:space-evenly;
      width:100%;
      height:40px;
      background:#f00;
  }
  
  #c-ask, #c-sub, #c-mnu {display:none;}
  
  #fade {
      width:100%;
      height:100%;
      position:fixed;
      top:0; left:0;
      background:rgba(0,0,0,0.5);
      display:none;
      z-index:1;
  }
  
  #popup {
      display:none;
      z-index:2;
      width:50%;
      height:50%;
      background:#fff;
      border: 1px solid #000;
      margin:auto;
      padding: 20px;
      overflow-x:hidden;
      overflow-y:auto;
      position: absolute;
      top:50%; left:50%;
      transform: translate(-50%, -50%);
  }
  </code></pre>
  <p><strong>jQuery:</strong></p>
  <pre class="lang-js prettyprint-override"><code>$('label').click(function(){ 
      $(&quot;#fade&quot;).fadeToggle();
      $(&quot;#popup&quot;).fadeToggle();           
      var $target = $('input[type=&quot;radio&quot;]:checked').attr('id');
      $('[id^=&quot;c-&quot;]').hide();
      $(&quot;#c-&quot; + $target).show();
  });
  $(&quot;#fade&quot;).click(function(){
      $(this).fadeOut();
      $(&quot;#popup&quot;).fadeOut();
  });
  </code></pre>