Optionsfeld CSS show hide div keine jQuery

Question

Ich versuche, die Ladezeit meiner Website zu reduzieren, und hatte eine Menge von Skripts, um eine Show ausblenden auf einer Login/Register-Schaltfläche Funktion auf meiner Website durchzuführen. Ich möchte, dass sich alle Benutzer anmelden und registrieren können, um dies zu vermeiden.

Ich habe mich entschieden, reines CSS zu verwenden, ein bisschen hacky, aber ich fühle es besser als mit JS.

Ich bezog mich auf this Antwort, mit this jsfiddle, um mein Problem zu lösen - das ist nicht mein Problem.

Hier ist mein html:

<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> 

ich mich in ein bisschen ein Wirrwarr bekam, so dass ich nicht mein Versuch posten. Ich nehme an, dass Formularobjekte in einem versteckten Div kein Problem sein sollten.

Danke für Ihre Hilfe!

Answer 1

Mit dem gleichen JS Fiddle-Code in Ihrer Frage können Sie sehen, wie es getan wird, wenn Sie nur eine #content auf den Wrapper anwenden und entfernen Sie die span Selektoren aus dem CSS. Making it:

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

Haftungsausschluss: Ich Kopieren/Einfügen von Code nicht Sie deuten darauf hin, dass nicht spezifisch auf Ihre Anwendung, aber da kein Versuch zur Verfügung gestellt wurde, sollten Sie damit beginnen, Code zu schreiben, der Ihren Bedürfnissen entspricht.