ラジオボタンCSS show hide div no jQuery

Question

サイトの読み込み時間を短縮しようとしていて、自分のサイトのログイン/登録ボタン機能でショーを隠すスクリプトがたくさんありました。私はすべてのユーザーがログインして登録できるようにしたいので、これを排除したいと考えています。

純粋なCSSを使用することに決めましたが、ちょっとハッキリですが、私はJSを使用するよりも優れています。

thisと回答しました。私の問題を解決するためにthis jsfiddleを使用しました。これは私のjsfiddleではありません。

は、ここに私の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> 

ので、私は私の試みを掲載しません。私は、隠されたdivのフォームオブジェクトが問題ではないと仮定します。

ありがとうございました！

Answer 1

あなたの質問に同じJS Fiddleコードを使用すると、#contentをラッパーに適用し、CSSからspanセレクタを削除するだけで、その完了を確認できます。それを作る：

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

免責事項：私はあなたがそれはあなたに固有ではありません見つけるのコピー/貼り付けコードを示唆していませんアプリケーションが提供されていますが、提供された試行がなかったので、これはあなたのニーズに合うようにコードを書くことから始めなければなりません。