title: Display Hidden Text On-Click
body: <p>I'm trying to display text when I click on my price tile.  However, nothing happens.</p>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;div class="col-xs-12 col-md-4"&gt;
      &lt;div class="priceTile pricebodytest"&gt;
          &lt;div class="priceBody"&gt;
            &lt;p align="center"&gt;FTTN 50&lt;/p&gt;
              &lt;ul&gt;
                  &lt;li&gt;50 Mbps Download&lt;/li&gt;
                  &lt;li&gt;150 GB Data Usage&lt;/li&gt;
              &lt;/ul&gt;
              &lt;h3&gt;\$48.99&lt;span&gt;Per Month&lt;/span&gt;&lt;/h3&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;span class="invisibletext"&gt;Test&lt;/span&gt;
  </code></pre>
  
  <p>My CSS: </p>
  
  <pre><code>.priceTile{
      background-color: #007dd1;
      color: white;
      margin: 8px 8px 8px 8px;
      padding: 4px;
      box-shadow: 1px 1px 2px 1px grey;
      padding-top: 24px;
      position: relative;
      top: -24px;
      left:0;
      border-radius: 15px;
  }
  .priceBody ul{
      list-style-type: none;
      font-size: 1.1em;
      font-weight: bold;
      line-height: 1.7em;
  }
  .priceBody h3{
      padding-left: 16px;
      margin-bottom: 24px;
      font-size: 2.5em;
      font-weight: bold;
  }
  .priceBody h3 span{
      margin-left: 8px;
      font-size: .6em;
  }
  .priceBody p{
      margin-left: 6px;
      font-size: 1.3em;
      font-weight: bold;
      text-align: center;
  
  }
  .priceBody p span{
      color: #66CCFF;
      line-height: 1.2em;
      font-weight: 700;
  }
  .invisibletext {
    display: none;
  }
  .pricebodytest:active {
    color: black;
  }
  .pricebodytest:active .invisibletext {
    display: inline-block;
  }
  </code></pre>
  
  <p>Now, the active pseudo class works, and when I click on it, my font color turns black.  However, when I click on the same spot, my text doesn't show.</p>
  
  <p>What am I doing wrong?</p>