Radyo düğmesi CSS show hide div no jQuery

Question

Sitemin yüklenme süresini azaltmaya çalışıyorum ve sitemdeki bir giriş/kayıt düğmesi işlevinde show hide yapmak için çok fazla komut dosyası vardı. Tüm kullanıcıların giriş yapabilmelerini ve kayıt olmalarını istiyorum, bu yüzden bunu ortadan kaldırmak istiyorum.

Saf CSS kullanmaya karar verdim, biraz hacky ama ben JS'yi kullanmaktan daha iyi hissediyorum.

Sorunumu çözmek için this jsfiddle kullanarak this yanıtına başvurdum - bu benim jsfiddle'ım değil.

Benim html: Bir karışıklık biraz kendimi var

<div class="header-login"> 

        <a href="#" class=""><i class="fa fa-power-off"></i> Login</a> 

        <div> 
         <form action="login" method="POST"> 
          <input type="text" name="email" class="form-control" placeholder="Email"> 
          <input type="password" name="password" autocomplete="off" class="form-control" placeholder="Password"> 
          <input type="submit" name="submit" class="btn btn-default" value="Login"> 
          <a href="forgot-password" class="btn btn-link">Forgot Password?</a> 
         </form> 
        </div> 

      </div> 

, bu yüzden benim girişimi sonrası olmaz. Gizli bir div içinde form nesneleri olması bir sorun olmamalı.

Yardımlarınız için teşekkürler!

Answer 1

Sorunuza aynı JS Fiddle kodunu kullanarak, sarıcıya yalnızca #content uygularsanız ve span seçicilerini css'den kaldırırsanız, bunun nasıl yapıldığını görebilirsiniz. bunu yapma:

JS Fiddle

HTML

<div class="header-login" id="content"> 

    <a href="#" class=""><i class="fa fa-power-off"></i> Login</a> 

    <div> 
    <form action="login" method="POST"> 
     <input type="text" name="email" class="form-control" placeholder="Email"> 
     <input type="password" name="password" autocomplete="off" class="form-control" placeholder="Password"> 
     <input type="submit" name="submit" class="btn btn-default" value="Login"> 
     <a href="forgot-password" class="btn btn-link">Forgot Password?</a> 
    </form> 
    </div> 

</div> 

CSS

label { 
    position: absolute; 
    top: 0; 
    left: 0 
} 

input#show, 
input#hide { 
    display: none; 
} 

#content { 
    display: block; 
    -webkit-transition: opacity 1s ease-out; 
    transition: opacity 1s ease-out; 
    opacity: 0; 
    height: 0; 
    font-size: 0; 
    overflow: hidden; 
} 

input#show:checked ~ .show:before { 
    content: "" 
} 

input#show:checked ~ .hide:before { 
    content: "Hide" 
} 

input#hide:checked ~ .hide:before { 
    content: "" 
} 

input#hide:checked ~ .show:before { 
    content: "Show" 
} 

input#show:checked ~ #content { 
    opacity: 1; 
    font-size: 100%; 
    height: auto; 
} 

input#hide:checked ~ #content { 
    display: block; 
    -webkit-transition: opacity 1s ease-out; 
    transition: opacity 1s ease-out; 
    opacity: 0; 
    height: 0; 
    font-size: 0; 
    overflow: hidden; 
} 


/* extra */ 

#content, 
#content1, 
#content2 { 
    float: left; 
    margin: 100px auto; 
} 

Yasal Uyarı: Bunu özgü değildir bulmak kopyalama/yapıştırma kodunu önermiyoruz senin Uygulama, ancak sağlanan bir girişim olmadığı için, bu sizin ihtiyaçlarınıza uygun kod yazarak başlamanız gerekir.