Gizli Metni Görüntüle Kapat On-Click

Question

Fiyat döşememi tıklattığımda metni görüntülemeye çalışıyorum. Ancak hiçbir şey olmuyor.

Benim HTML:

<div class="col-xs-12 col-md-4"> 
    <div class="priceTile pricebodytest"> 
     <div class="priceBody"> 
      <p align="center">FTTN 50</p> 
      <ul> 
       <li>50 Mbps Download</li> 
       <li>150 GB Data Usage</li> 
      </ul> 
      <h3>\$48.99<span>Per Month</span></h3> 
     </div> 
    </div> 
</div> 
<span class="invisibletext">Test</span> 

Benim CSS:

.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; 
} 

Şimdi

aktif sözde sınıfı çalışır ve bunu tıkladığınızda, benim yazı tipi rengi kararır. Ancak, aynı noktaya tıkladığımda metnim gösterilmiyor.

Neyi yanlış yapıyorum?

Answer 1

Sizin html bu şekilde modifiye edilmelidir:

<div class="col-xs-12 col-md-4"> 
    <div class="priceTile pricebodytest"> 
     <div class="priceBody"> 
      <p align="center">FTTN 50</p> 
      <ul> 
       <li>50 Mbps Download</li> 
       <li>150 GB Data Usage</li> 
      </ul> 
      <h3>\$48.99<span>Per Month</span></h3> 
     </div> 
     <span class="invisibletext">Test</span> 
    </div> 

</div>