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
– PublicDisplayName, Commented Mar 23, 2016 at 0:37
That's not my jsfiddle, that's what I used in my example, however mine doesn't work as intended — PublicDisplayName
– PublicDisplayName, Commented Mar 23, 2016 at 0:37
You will probably have better luck getting an answer from SO users if you provide your attempt. — Derek Story
– Derek Story, Commented Mar 23, 2016 at 0: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
– Ahmed, Commented Mar 23, 2016 at 6:17

Derek Story · Accepted Answer · 2016-03-23 00:52:00Z

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.

Collectives™ on Stack Overflow

Radio button CSS show hide div no jQuery

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related