Radio button CSS show hide div no jQuery

Question

I am trying to reduce the load time of my site, and had a lot of scripts to perform a show hide on a login/register button function on my site. I want all users to be able to login and register therefore want to eliminate this.

I have decided to use pure CSS, a bit hacky but I feel its better than using JS.

I referred to this answer, using this jsfiddle in order to solve my issue - this is not my jsfiddle.

Here is my 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>

I got myself in a bit of a muddle, so I won't post my attempt. I assume having form objects in a hidden div shouldnt be a problem.

Thanks for your help!

Nothing would happen when I clicked. I assume I've done something wrong along the way however I have no idea where I've gone wrong — PublicDisplayName, Mar 23 '16 at 00:37
That's not my jsfiddle, that's what I used in my example, however mine doesn't work as intended — PublicDisplayName, Mar 23 '16 at 00:37
You will probably have better luck getting an answer from SO users if you provide your attempt. — Derek Story, Mar 23 '16 at 00:39
Actually , in your situation , css its not better than jquery , i advise you to use 2 line of jquery it will solve your issue — Ahmed, Mar 23 '16 at 06:17
I have the jQuery already working, however I wanted to use something that wouldn't restrict users, even though its a small percentage. Why do you think jQuery is better? — PublicDisplayName, Mar 23 '16 at 12:05

Derek Story · Answer 1 · 2016-03-23T00:52:00.170

Using the same JS Fiddle code in your question, you can see how its done if you just apply a #content to the wrapper and remove the span selectors from the 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;
}

Disclaimer: I don't suggest copying/pasting code you find that isn't specific to your application, but since there wasn't an attempt provided, this should get you started in writing code to fit your needs.

Radio button CSS show hide div no jQuery

1 Answers1